如何創建多個工具提示？

Question

如何為多個類創建多個工具提示？

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

您需要選擇每個“工具提示”鏈接，循環它們並將鼠標懸停事件綁定到每個工具提示內容。 也不要使用重復的id，使用類。 我修改了一些HTML和CSS（添加z-index）。

這樣的東西會起作用：

 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

問題不清楚。

您是否嘗試為單個圖像添加多個工具提示？

如果是這種情況，您可以使用圖像映射或將div設置為background: transparent在您想要工具提示的位置background: transparent ，然后使用工具提示。

W3的一些幫助與地圖

希望這對你有用。