I want to manipulate a tooltip or popover after it is created with twitter bootstrap. As far as i know there isn't a build in way to do this.
$('#selector').popover({
placement: 'bottom'
});
For example lets say i want to move the created tooltip up 5px and left 5px from it's calculated location. Any ideas on the best way to do this?
This is what i'd like to do:
$('#selector').popover({
placement: 'bottom',
callback: function(){
alert('Awesome');
}
});
Tooltip: use tooltips to show a short text to respondents when they hover over a word or icon. Popover: use popovers to show a longer text, or when you want to have a link to an external web page. It is shown when the respondent clicks on a word or icon.
The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content. Tip: Plugins can be included individually (using Bootstrap's individual "popover. js" file), or all at once (using "bootstrap.
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.
You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper in order for popovers to work! Popovers require the tooltip plugin as a dependency. Popovers are opt-in for performance reasons, so you must initialize them yourself.
Works for tooltip:
var tmp = $.fn.tooltip.Constructor.prototype.show;
$.fn.tooltip.Constructor.prototype.show = function () {
tmp.call(this);
if (this.options.callback) {
this.options.callback();
}
}
this.$('#selector').tooltip({
placement: 'top',
callback: function() {
alert('hello')
}
});
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