How to make Bootstrap 3 tooltip follow mouse?

Question

I have a list of links on my site that are showing images in a Bootstrap tooltip

<a data-html="true" data-toggle="tooltip" title="<img src='1.png' />">Item 1</a>
<a data-html="true" data-toggle="tooltip" title="<img src='2.png' />">Item 2</a>
<a data-html="true" data-toggle="tooltip" title="<img src='3.png' />">Item 3</a>

<script type="text/javascript" language="javascript">

    $(document).ready(function () {
        $('a').tooltip({
            placement: "right"
        })
    }

</script>

This just brings up the tooltip to the right of all the links. The images are static though, I'd like the tooltip image to move around as the user moves their mouse around.

You can see an example of what I want to do on this site: http://www.hearthpwn.com/decks/381677-druidereno. On the right sidebar, there's a list of cards you can hover over, and the tooltip images follow the mouse movement. Doesn't look like they use Bootstrap, I just want to emulate the functionality.

I don't see anything to do this in the Bootstrap functionality: http://getbootstrap.com/javascript/#tooltips

Anyone know how I can do this?

Answer 1

You cannot do that natively in bootstrap. But you can easily mimick the behaviour by using a "proxy element". The trick is to attach the image tooltip to a second element and then update that elements position according to the mouse position when you move the mouse cursor around inside the image.

An image :

<img id="img" src="https://static.pexels.com/photos/6555/nature-sunset-person-woman-large.jpg" />

A proxy element, here an <i> tag with trigger: manual :

<i id="img-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip for image" data-animation="false" data-trigger="manual"/>

Set the proxy elements position to absolute so it can be moved around anywhere :

#img-tooltip {
  position: absolute;
}

Finally update the proxys position and show the tooltip when you move the mouse cursor around inside the image :

$("#img").on('mousemove', function(e) {
  $("#img-tooltip").css({top: e.pageY, left: e.pageX });
  $('[data-toggle="tooltip"]').tooltip('show')
})
$("#img").on('mouseleave', function(e) {
    $('[data-toggle="tooltip"]').tooltip('hide')
})

demo -> http://jsfiddle.net/h2dL07ns/

---

Updated demo -> http://jsfiddle.net/h2dL07ns/324/ using @Marks's pointer-events: none; suggestion. It removes any occasional flickering.

Answer 2

enhanced davickon answer for multiple images

$(".img").on('mousemove', function(e) {

  $("#" + $(this).attr("TooltipId")).css({
    top: e.pageY,
    left: e.pageX
  });

  $("#" + $(this).attr("TooltipId")).tooltip('show');
  $(".tooltip-inner").css({
    "background-color": $(this).attr("TooltipBackround")
  });
  var a = ($("#" + $(this).attr("TooltipId")).attr("data-placement") != "") ? $("#" + $(this).attr("TooltipId")).attr("data-placement") : "top";
  $(".tooltip-arrow").css("border-" + a + "-color", $(this).attr("TooltipBackround"));
})

$(".img").on('mouseleave', function(e) {
  $("#" + $(this).attr("TooltipId")).tooltip('hide')
})

.img-tooltip {
  position: absolute;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<h1>header</h1>
<img class="img" src="https://static.pexels.com/photos/6555/nature-sunset-person-woman-large.jpg" TooltipBackround="green" TooltipId="img-tooltip1" />
<i id="img-tooltip1" class="img-tooltip" data-toggle="tooltip" data-html="true" data-placement="right" title="Tooltip for image <h1>Faizan</h1>" data-animation="false" data-trigger="manual"></i>

<br>
<br>
<br>
<br>
<img class="img" src="https://static.pexels.com/photos/6555/nature-sunset-person-woman-large.jpg" TooltipBackround="blue" TooltipId="img-tooltip2" />
<i id="img-tooltip2" class="img-tooltip" data-toggle="tooltip" data-html="true" data-placement="right" data-animation="false" data-trigger="manual" title="Tooltip for image <h1>Faizan Anwer</h1>"></i>