How to make popover appear where my mouse enters the hover target?

Question

This is an example code to show the popover window display below my button:

$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
placement: 'bottom', content: ''

Now I want the popover window appear on the place where my cursor moves on(not only top/bottom/left/right, but a specific location which depends on where user put their cursor on).

How to get it?

Answer 1

In bootstrap-tooltip.js, replace (at about line 72)

     , enter: function (e) {

with

     , enter: function (e) {
       var mousePos = { x: -1, y: -1 };
       mousePos.x = e.pageX;
       mousePos.y = e.pageY;
       window.mousePos = mousePos;

and replace (at about line 144)

      case 'right':
            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
            break

with

      case 'right':
        tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
        break
      case 'mouse':
        tp = {top: window.mousePos.y, left: window.mousePos.x}
        break

Then call your popover like this:

$('.pop').popover({'placement': 'mouse'});

This is a quick-n-dirty way to go about it (hacking core files), but it works. Perhaps someone else has a nicer method. Note that the popover pointer will need some work as it doesn't appear.

This example was tested in Bootstrap 2.0.3, but the code appears similar in 2.2.2.