Increase width with CSS You can use CSS to increase the width of your popover, like so: /* The max width is dependant on the container (more info below) */ .popover{ max-width: 100%; /* Max Width of the popover (depending on the container!) */ } If this doesn’t work, you probably want the solution below … Read more
First of all, if you want to use HTML inside the content you need to set the HTML option to true: $(‘.danger’).popover({ html : true}); Then you have two options to set the content for a Popover Use the data-content attribute. This is the default option. Use a custom JS function which returns the HTML … Read more
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
iOS 8 and later Beginning with iOS 8, you can use UIPopoverPresentationController for iPhones in addition to iPads. Setup Add a UIBarButtonItem to your main View Controller. Add another View Controller to the storyboard. Change it to the size that you want the popover to be and add any content that you want it to … Read more
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
You cannot use <li href=”#” since it belongs to <a href=”#” that’s why it wasn’t working, change it and it’s all good. Here is working JSFiddle which shows you how to create bootstrap popover. Relevant parts of the code is below: HTML: <!– Note: Popover content is read from “data-content” and “title” tags. –> <a … Read more
Update: A slightly more robust solution: http://jsfiddle.net/mattdlockyer/C5GBU/72/ For buttons containing text only: $(‘body’).on(‘click’, function (e) { //did not click a popover toggle or popover if ($(e.target).data(‘toggle’) !== ‘popover’ && $(e.target).parents(‘.popover.in’).length === 0) { $(‘[data-toggle=”popover”]’).popover(‘hide’); } }); For buttons containing icons use (this code has a bug in Bootstrap 3.3.6, see the fix below in this … Read more