Menu
I'm trying to use http://twitter.github.io/bootstrap/javascript.html#popovers. I can set the trigger to any one of click | hover | focus | manual. Is there a way to set multiple triggers? I want to use hover and focus.
647
Set the trigger option of the popover to hover instead of click , which is the default one. Or with an initialization option: $("#popover"). popover({ trigger: "hover" });
To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.
A Bootstrap Popover is an attribute in bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed with a click of a mouse pointer over that element.
This is easy enough to accomplish by defining your own event handlers and showing/hiding the popover via the API:
HTML:
<input id='no-popover' type='text' />
<input id='has-popover' type='text' placeholder='hover or focus me' />
JavaScript:
var showPopover = function () {
$(this).popover('show');
}
, hidePopover = function () {
$(this).popover('hide');
};
$('#has-popover').popover({
content: 'Popover content',
trigger: 'manual'
})
.focus(showPopover)
.blur(hidePopover)
.hover(showPopover, hidePopover);
Example: http://jsfiddle.net/Xqx8P/
85
When initializing your popover, you may pass multiple triggers; separate them with a space.
var options = {
trigger: 'hover focus'
}
$('#has-popover').popover(options);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
