複数のツールチップを作成するには？

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

あなたは、すべてのツールヒントのコンテンツにあなたの "ツールヒント可能な" リンク、それらをループし、バインドmouseoverイベントのそれぞれを選択する必要があります。重複したIDを使用しないで、クラスを使用してください。私はHTMLとCSSを少し修正しました（Z-インデックスを追加）。このような

何かが動作します：

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

質問は不明です。

1つの画像に複数のツールチップを挿入しようとしていますか？

イメージマップを使用するか、またはツールチップを使用する場所にbackground: transparentのdivを配置し、ツールチップを使用することができます。これはあなたのために働く

Some help from W3 with map

希望。