如何创建多个工具提示？

我怎样才能创建多个工具提示多重类？如何创建多个工具提示？

<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>

来源

2017-04-11 Ryuky Ryuk

我不关注，你究竟在做什么？ –

我想将该图像与其他工具提示相乘。 –

所以你想在一个图像上使用多个工具提示，或者在一个工具提示中使用多个图像？ –

你需要在他们和绑定鼠标悬停事件来选择你的每一个“工具提示可以”链接，循环到每一个提示内容。也不要使用重复的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>

来源

2017-04-11 12:10:16 dfsq

哇。你很棒。谢谢！ –

很高兴帮助。 – dfsq

问题不清楚。

您是否试图为单个图像添加多个工具提示？

如果是这种情况，您可以使用图像映射或将div与background: transparent放在您想要的工具提示的位置，然后使用工具提示。

Some help from W3 with map

希望这对你的作品。

来源

2017-04-11 12:14:19

如何创建多个工具提示？

回答

相关问题