You’ll need to pass html option with value true while initializing popover like following. Demo JS: $(“[data-toggle=popover]”) .popover({html:true}) HTML: <a href=”#” role=”button” class=”btn popovers” data-toggle=”popover” title=”” data-content=”test content <a href=”” title=”test add link”>link on content</a>” data-original-title=”test title” target=”_blank” > test link </a>
You can change the popover’s dimensions with CSS: .popover{ width:200px; height:250px; } But that CSS will change ALL popovers. What you need to do is put the button in a container element and use CSS like this: #containerElem .popover { width:200px; height:250px; max-width:none; // Required for popovers wider than 276px (Bootstrap’s max-width for popovers) } … Read more
In iPhone, you should add the following in order to present a popover. func adaptivePresentationStyleForPresentationController(controller: UIPresentationController!) -> UIModalPresentationStyle { // Return no adaptive presentation style, use default presentation behaviour return .None }
Here’s one I made which is as simple as it gets. It’s just a lightweight UIView that allows you to specify the element size in case you want blocked regions (elementSize > 1). It draws itself in interface builder so you can set element size and see the consequences. Just set one of your views … Read more
Very simple 🙂 <a href=”#” id=”blob” class=”btn large primary” rel=”popover”>hover for popover</a> var img = ‘<img src=”https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png” />’; $(“#blob”).popover({ title: ‘Look! A bird!’, content: img, html:true }); http://jsfiddle.net/weuWk/
I had this issue because I was trying to perform segue / present from within: – (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex I changed it to: – (void)actionSheet:(UIActionSheet *)actionSheet didDismissWithButtonIndex:(NSInteger)buttonIndex and it fixed it!
The reason appears to be that the javascript is creating brand new elements to display the popover itself. These new elements have different css class names than the original. Try adding this to your css: .popover-title { color: blue; font-size: 15px; } .popover-content { color: red; font-size: 10px; } Update Depending on the library version … Read more
With bootstrap (tested with version 2) I figured out the following code: $(“a[rel=popover]”) .popover({ offset: 10, trigger: ‘manual’, animate: false, html: true, placement: ‘left’, template: ‘<div class=”popover” onmouseover=”$(this).mouseleave(function() {$(this).hide(); });”><div class=”arrow”></div><div class=”popover-inner”><h3 class=”popover-title”></h3><div class=”popover-content”><p></p></div></div></div>’ }).click(function(e) { e.preventDefault() ; }).mouseenter(function(e) { $(this).popover(‘show’); }); The main point is to override template with mouseleave() enabler. I hope this … Read more
This works. Tested. .popover { top: 71px !important; left: 379px !important; }
You’ll need to pass html option with value true while initializing popover like following. Demo JS: $(“[data-toggle=popover]”) .popover({html:true}) HTML: <a href=”#” role=”button” class=”btn popovers” data-toggle=”popover” title=”” data-content=”test content <a href=”” title=”test add link”>link on content</a>” data-original-title=”test title” target=”_blank”>test link</a>