Popover
Popover is a balloon library like Facebook app. It is written in pure swift.
I have seen a lot of applications with a Menubar Item or applications with only a Menubar interface.
There are some tutorials and stuff on the internet showing you how to accomplish that. But the thing is, those do only have clickable index rows in them.
I would want to have a NSPopover appear when you click the Menubar Icon / Item. Anybody who knows how to make this?
Source: (StackOverflow)
Using an instance of a UIViewController, is there any way I can find the UIPopoverController being used to present it? I would also want to find the UIViewController that displayed the UIPopoverController in the first place.
I would normally use a delegate or other sort of notification to send a signal from the displayed view controller to the displaying one, but in this case I'm trying to create a reusable custom segue that dismisses the popover and then moves on to another view in the main view.
Source: (StackOverflow)
Can we get popovers to be dismissable in the same way as modals, ie. make them close when user clicks somewhere outside of them?
Unfortunately I can't just use real modal instead of popover, because modal means position:fixed and that would be no popover anymore. :(
Source: (StackOverflow)
What am i doing wrong here?
I tried it in a larger project and couldnt get it to work either
see my jsfiddle
http://jsfiddle.net/keithmancuso/24RQM/
UPDATE: ok so i got it working if i manually add $(".pop").popover(); but do i have to initalize them like that?
I think the answer is yes... you do have the initialize them in your own code to get it to work... the easiest way i've found to do this is just add
$(function() {
$('a[rel="popover"]').popover();
});
Source: (StackOverflow)
JS:
$(function(){
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">×</button>',
content : 'test'
})
$('html').click(function() {
$('#close').popover('hide');
});
});
HTML:
<button type="button" id="example" class="btn btn-primary" ></button>
i'm write your code isn't show your popup.
anyone come across this problem?
Source: (StackOverflow)
I'm trying to position a twitter-bootstrap popover for a trigger that sits on the far top-right corner of a 960px wide web page.
Ideally, I'd position it on the bottom and move the arrow with CSS (so the arrow is on the top-right of the popover).
Unfortunately the 'placement':'bottom' positioning is not enough, since it will center it below the trigger.
I'm looking for solution that will place the popover statically below and on the left of the trigger. I read tons of questions but couldn't find any.
Hints?
Source: (StackOverflow)
I am trying to display html inside a bootstrap popover, but somehow its not working. I found some answers here but it won't work for me. Please let me know if I'm doing something wrong.
<script>
$(function(){
$('[rel=popover]').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
</script>
<li rel='nofollow' href="#" id="example" rel="popover" data-content="" data-original-title="A Title">
popover
</li>
<div id="popover_content_wrapper" style="display: none">
<div>This is your div content</div>
</div>
Thank you so much.
Source: (StackOverflow)
I am using twitter's bootstrap's popover here. Right now, when i scroll over the popover text a popover appears with just text from the <a>'s data-content attribute. I was wondering if there was anyway to put a <div> inside the popover. Potentially, I would like to use php and mysql in there, but if i could get a div to work i think i can figure out the rest. I tried setting data-content to a div ID, but it didnt work.
HTML:
<a class='danger'
data-placement='above'
rel='popover'
data-content='#PopupDiv'
rel='nofollow' href='#'>Click</a>
Source: (StackOverflow)
I can make popovers appear using bootstrap easily enough, and I can also do validations using the standard jQuery validation plugin or the jQuery validation engine, but I can't figure out how to feed one into the other.
I think what I need is some hook which is called by the validator when it wants to display a notification, give it a closure that passes the message and the target element to a popover. This seems like a kind of dependency injection.
All nice in theory, but I just can't figure out where that hook is, or even if one exists in either validation engine. They both seem intent on taking responsibility for displaying notifications with all kinds of elaborate options for placement, wrappers, styles when all I'm after is the error type(s) (I don't necessarily even need message text) and element it relates to. I've found hooks for the entire form, not the individual notifications.
I much prefer validation systems that use classes to define rules, as they play nicely with dynamically created forms.
Anyone have a solution or a better idea?
Source: (StackOverflow)
<div class="container">
<div class="row" style="padding-top: 240px;">
<a rel='nofollow' href="#" class="btn btn-large btn-primary" rel="popover"
data-content="<form><input type="text"/></form>"
data-placement="top" data-original-title="Fill in form">Open form</a>
</div>
</div>
JSfiddle
I'm guessing that I would store the form contents within a javascript function...
How do I contain a form within a bootstrap popover?
Source: (StackOverflow)
I'm working on a bootstrap site and after updating to bootstrap 2.2 from 2.0 everything worked except the popover.
The popovers still show up fine, but they don't show up on top of all other elements.
<div> // this sits on top of the popover. this did not happen before cleaning up scripts.
<div> //popover shows on top of this
<div> //popover shows on top of this
//link here with popover in it.
</div>
</div>
</div>
Anyone have any idea on why the behavior of the popover changed, or how I can fix it? Thanks.
Source: (StackOverflow)
The canonical example for Twitter Bootstrap's popover feature is sort of a tooltip on steroids with a title.
HTML:
<a rel='nofollow' href="#" id="blob" class="btn large primary" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A title">hover for popover</a>
JS:
<script>
$("#blob").popover({offset: 10});
</script>
I'd like to use popover to display an image. Is this possible?
Source: (StackOverflow)
I am designing a page using Bootstrap 3. I am trying to use a popover with placement: right on an input element. The new Bootstrap ensures that if you use form-control you basically have a full-width input element.
The HTML code looks something like this:
<div class="row">
<div class="col-md-6">
<label for="name">Name:</label>
<input id="name" class="form-control" type="text"
data-toggle="popover" data-trigger="hover"
data-content="My popover content.My popover content.My popover content.My popover content." />
</div>
</div>
The popovers width is too low, in my opinion because their isn't any width left in the div.
I want the input form on the left side, and a wide popover on the right side.
Mostly, I'm looking for a solution where I don't have to override Bootstrap.
The attached JsFiddle. The second input option. Haven't used jsfiddle a lot so don't know, but try increasing the size of the output box to see results, on smaller screens wouldn't even see it.
http://jsfiddle.net/Rqx8T/
Source: (StackOverflow)
I have scoured the Internet far and wide and while I found this stackoverflow post insightful Is it possible to change the position of Bootstrap popovers based on screen width?, it still didn't answer my question, likely due to my trouble understanding position/offset.
Here's what I'm trying to do. I want the Twitter Bootstap Popover position to be RIGHT unless the hotspot popover will be positioned beyond the viewport, then I want it to be positioned LEFT. I'm making an iPad web app that has hot spots, when you push on a hotspot, information appears but I don't want it to appear outside of the viewport when horizontal scrolling is locked.
I'm thinking it'd go something like this:
$('.infopoint').popover({
trigger:'hover',
animation: false,
placement: wheretoplace
});
function wheretoplace(){
var myLeft = $(this).offset.left;
if (myLeft<500) return 'left';
return 'right';
}
Thoughts? Thanks!
Source: (StackOverflow)
I am using twitter boostrap's popover to create a hover card to show user info, and I am triggering popover on mouseover check jsfiddle here. I want to keep this popover alive while it being hovered.
<a rel='nofollow' href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>
$('#example').popover({
html : true,
trigger : 'manual',
content : function() {
return '<div class="box"></div>';
}
});
$(document).on('mouseover', '#example', function(){
$('#example').popover('show');
});
$(document).on('mouseleave', '#example', function(){
$('#example').popover('hide');
});
You can think of working of facebook hover card. I want to make it same way. How can I do this?
Source: (StackOverflow)