Menu
Is it possible to trigger a popover event when a user clicks in an input field, then disable it when the user clicks in another field? Here's what I have, but it does not disable when the user clicks in another field.
<input id="example" />
<script>
$(document).ready(function() {
$(function ()
{ $("#example").popover({title: 'Twitter Bootstrap Popover', content: "It's so simple to create a tooltop for my website!"});
});
});
</script>
How can I make this popover disable when the user clicks in another input field? Thank you!
333
To create a popover, you need to add the data-bs-toggle="popover" attribute to an element. Whereas, popover's title and its content that would display upon trigger or activation can be specified using the title and data-bs-content attribute respectively. Here is the standard markup for adding a popover to a button.
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.
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-bs-toggle="popover" attribute to an element. Note: Popovers must be initialized with JavaScript to work.
One simple way of hiding it would be to subscribe to blur:
$(function () {
$("#example")
.popover({ title: 'Twitter Bootstrap Popover', content: "It's so simple to create a tooltop for my website!" })
.blur(function () {
$(this).popover('hide');
});
});
I made some testing with Christoffers answer and got it minimized:
$('#element').popover({ trigger: 'focus', title: 'Twitter Bootstrap Popover', content: "It's so simple to create a tooltop for my website!" })
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
