Bootstrap Popover Multiple Triggers

Popovers are useful for tooltips, notes, or other short messages. Bootstrap does a good job of its native popover tooltip, but needs a bit of help to work with a mobile device (since they don’t have hover).

To get popovers that work on click and hover at the same time, you can instantiate the popover in your JavaScript code using the simple example below.

Be sure to remember to put the name of your element selector in place of the example.

JS Code for Hover and Click

var showPopover = function () {
    $(this).popover('show');
};
var hidePopover = function () {
    $(this).popover('hide');
};
$('#YOURELEMENT').popover({
    trigger: 'manual'
}).click(showPopover).hover(showPopover, hidePopover);

Solid Tip: The focus and blur methods are available in addition to click and hover should you have a need.

Example HTML

<span data-content="some note content" data-placement="top" data-rel="popover">

You can of course assign the popovers to any kind of element you want, not just a span.

Now your popovers will be mobile device friendly and will show up with a tap.