How to create multiple Tooltips?

Question

How can i create multiple tooltips for multiples class?

https://jsfiddle.net/6v1fbrk9/

<img src="http://animekompi.web.id/wp-content/uploads/2015/01/68839-128x200.jpg"/>

<span id="tooltip-span">

    <img class="hidden" src="https://2.bp.blogspot.com/-RPZhwHLprkw/WOtXJpHaQ6I/AAAAAAAAE-M/SXjdESQrlZ4FQzWWwrfoSJ9-UWJ4jxxlQCLcB/s1600/q.png" />
</span>

Answer 1

You will need to select each of your "tooltip-able" links, loop over them and bind mouseover event to every tooltip content. Also don't use duplicated ids, use classes. I fixed HTML and CSS a little (add z-index).

Something like this will work:

 var tooltips = [].slice.call(document.querySelectorAll('.tooltip')) tooltips.forEach(function(tooltip) { var tooltipSpan = tooltip.querySelector('.tooltip-content'); tooltip.onmousemove = function(e) { var x = e.clientX, y = e.clientY; tooltipSpan.style.top = (y + 20) + 'px'; tooltipSpan.style.left = (x + 20) + 'px'; } }) 

 .tooltip { text-decoration: none; position: relative; } a.tooltip .tooltip-content { display: none; z-index: 1000; } a.tooltip:hover .tooltip-content { display: block; position: fixed; overflow: hidden; } img.hidden { display: block; } 

 <a class="tooltip" href="http://www.google.com/"> <img src="http://animekompi.web.id/wp-content/uploads/2015/01/68839-128x200.jpg" /> <span class="tooltip-content"> <img class="hidden" src="https://2.bp.blogspot.com/-RPZhwHLprkw/WOtXJpHaQ6I/AAAAAAAAE-M/SXjdESQrlZ4FQzWWwrfoSJ9-UWJ4jxxlQCLcB/s1600/q.png" /> </span> </a> <a class="tooltip" href="http://www.google.com/"> <img src="http://animekompi.web.id/wp-content/uploads/2015/01/68839-128x200.jpg" /> <span class="tooltip-content"> <img class="hidden" src="https://2.bp.blogspot.com/-RPZhwHLprkw/WOtXJpHaQ6I/AAAAAAAAE-M/SXjdESQrlZ4FQzWWwrfoSJ9-UWJ4jxxlQCLcB/s1600/q.png" /> </span> </a> 

Answer 2

Question is unclear.

Are you trying to put multiple tooltips for a single image?

If that's the case,You could use image-map or put divs with background: transparent at the locations you want the tooltips, and then using the tooltips on it.

Some help from W3 with map

Hope this works for you.