I've got a bootstrap popover working so:

1. Popover opens on click
2. Popover closes when you click outside the popover
3. Popover has default href for if JS is disabled

Code is:

<a class="badge badge-popover"
    data-original-title="title here"
    data-trigger="focus"
    data-placement="right"
    data-content="<p>Content Here</p>" data-html="true"
    href="/help">?</a>

$('.badge-popover').click(function(e){
    e.preventDefault();
}).popover();

It's working fine across all browsers, but not on the iPad. Any ideas why? Where am I going wrong? Thanks :)

I am using Jquery 1.9.1, bootstrap 2.1.1

I've got a bootstrap popover working so:

1. Popover opens on click
2. Popover closes when you click outside the popover
3. Popover has default href for if JS is disabled

Code is:

<a class="badge badge-popover"
    data-original-title="title here"
    data-trigger="focus"
    data-placement="right"
    data-content="<p>Content Here</p>" data-html="true"
    href="/help">?</a>

$('.badge-popover').click(function(e){
    e.preventDefault();
}).popover();

It's working fine across all browsers, but not on the iPad. Any ideas why? Where am I going wrong? Thanks :)

I am using Jquery 1.9.1, bootstrap 2.1.1

• javascript
• jquery
• twitter-bootstrap

• Are you using the latest version of jQuery? – Jivings Commented Mar 18, 2013 at 0:10
• @Jivings I am using 1.9.1 – Nicole Harris Commented Mar 18, 2013 at 0:15
• try chaining the popover before the click – Ohgodwhy Commented Mar 18, 2013 at 0:21
• @Ohgodwhy, nope, that doesn't seem to work – Nicole Harris Commented Mar 18, 2013 at 0:24
• Threw it in a jsFiddle -- this works fine for me on iOS6 – Ohgodwhy Commented Mar 18, 2013 at 0:27

4 Answers 4

Try to use the hover event:

This should trigger the Popover on Desktop via hover and on mobile/tablet via click(touch).

<a class="badge badge-popover"
   data-original-title="title here"
   data-placement="right"
   data-trigger="hover"
   data-content="<p>Content Here</p>" data-html="true"
   href="/help">?</a>

Refer following code snippet to get it works:

$('[data-toggle="popover"]').popover();

$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
        $(this).popover('hide');
    }
 });
});

This is the easiest way of detecting clicks on the body and close all the tooltips on the page.

You can check the live example here

Thanks!

Just encountered the same problem. Changing data-trigger="focus" to data-trigger="click" works. Hover also works.

Changing data-trigger="focus" to data-trigger="click" works almost ok, but the problem is that the popover remains open even when you click outside of it and you can close it only if you click on the element, that initiated the popover...