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
JAVASCRIPTview code
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
HTMLview code
<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.