How to make a bootstrap 3 tooltip with the mouse?

Question

I have a list of links on my site that show images in 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>

It just displays a tooltip to the right of all links. Images are static though, I would like the tooltip image to move when the user moves the mouse.

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 is a list of cards that you can hover over, and tooltips follow the mouse movement. It doesn't seem like they are using Bootstrap, I just want to emulate the functionality.

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

- , ?

Answer 1

. , "-". , , , .

:

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

-, <i> trigger: manual:

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

- position absolute, :

#img-tooltip {
  position: absolute;
}

, , :

$("#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/

Answer 2

davickon

$(".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>

Hide result

Answer 3

angularjs . . -. . . . . .

DOM , tooltip , . DOM html, , DOM, tooltip. . .

Answer 4

Faizan T3db0t , , , : css .

:

<i>&#160;</i>

css:

.area-tooltip {
  position: absolute;
  visibility: hidden;
}

See my pen: https://codepen.io/Larhanya/pen/VMjZBz (the code has been changed for the image map since what I need)

Truncated HTML from a pen:

    <img src="http://lorempixel.com/output/food-q-c-350-350-5.jpg" usemap="#foodmap">
    <map id="#foodmap" name="foodmap">
      <area class="area" shape="poly" coords="78,133,158,182,162,349,0,349,0,283" href="#" target="_self" style="outline:none;" TooltipBackround="black" TooltipId="area-tooltip4" />
      <i id="area-tooltip4" class="area-tooltip" data-toggle="tooltip" data-html="true" data-placement="right" title="Pepper" data-animation="false" data-trigger="manual">&#160;</i>
    </map>