Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Callback function after tooltip / popover is created with twitter bootstrap?

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');
  }
});
like image 462
Jose Browne Avatar asked Feb 04 '13 20:02

Jose Browne


People also ask

What is the difference between popover and tooltip?

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.

How does bootstrap popover work?

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.

How do I customize bootstrap popover?

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.

Does bootstrap include popper?

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.


1 Answers

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') 
  } 
});
like image 153
user20140268 Avatar answered Sep 21 '22 22:09

user20140268