popover

Bootstrap Popover – how to add link in text popover?

by

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>

Bootstrap popover content cannot changed dynamically

by

If you grab the popover instance like this: var popover = $(‘.reply’).data(‘bs.popover’); Then, to redraw the popover, use the .setContent() method: popover.setContent(); I found out browsing the source: https://github.com/twitter/bootstrap/blob/master/js/popover.js So, in your example, try: thisVal.attr(‘data-content’,data).data(‘bs.popover’).setContent(); Update The setContent() method also removes the placement class, so you should do: var popover = thisVal.attr(‘data-content’,data).data(‘bs.popover’); popover.setContent(); popover.$tip.addClass(popover.options.placement); Demo: … Read more

How to insert close button in popover for Bootstrap

by

You need to make the markup right <button type=”button” id=”example” class=”btn btn-primary”>example</button> Then, one way is to attach the close-handler inside the element itself, the following works : $(document).ready(function() { $(“#example”).popover({ placement: ‘bottom’, html: ‘true’, title : ‘<span class=”text-info”><strong>title</strong></span>’+ ‘<button type=”button” id=”close” class=”close” onclick=”$(&quot;#example&quot;).popover(&quot;hide&quot;);”>&times;</button>’, content : ‘test’ }); });

How to use Twitter Bootstrap popovers for jQuery validation notifications?

by

This is a hands-on example: $(‘form’).validate({ errorClass:’error’, validClass:’success’, errorElement:’span’, highlight: function (element, errorClass, validClass) { $(element).parents(“div[class=”clearfix”]”).addClass(errorClass).removeClass(validClass); }, unhighlight: function (element, errorClass, validClass) { $(element).parents(“.error”).removeClass(errorClass).addClass(validClass); } }); It doesn’t really use bootstrap popovers, but it looks really nice and is easy to achieve. UPDATE So, to have popover validation you can use this code: $(“form”).validate({ rules … Read more

Changing the position of Bootstrap popovers based on the popover’s X position in relation to window edge?

by

I just noticed that the placement option could either be a string or a function returning a string that makes the calculation each time you click on a popover-able link. This makes it real easy to replicate what you did without the initial $.each function: var options = { placement: function (context, source) { var … Read more

Contain form within a bootstrap popover?

by

I would put my form into the markup and not into some data tag. This is how it could work: JS Code: $(‘#popover’).popover({ html : true, title: function() { return $(“#popover-head”).html(); }, content: function() { return $(“#popover-content”).html(); } }); HTML Markup: <a href=”#” id=”popover”>the popover link</a> <div id=”popover-head” class=”hide”> some title </div> <div id=”popover-content” class=”hide”> … Read more

bootstrap popover not showing on top of all elements

by

I was able to solve the problem by setting data-container=”body” on the html element HTML example: <a href=”#” data-toggle=”tooltip” data-container=”body” title=”first tooltip”> hover over me </a> JavaScript example: $(‘your element’).tooltip({ container: ‘body’ }) Discovered from this link: https://github.com/twitter/bootstrap/issues/5889