如何将工具提示图像添加到多个按钮答案

【问题标题】：how to add tooltip image to more than one buttons如何将工具提示图像添加到多个按钮
【发布时间】：2016-01-05 13:02:53
【问题描述】：

如何将工具提示图像添加到多个按钮。我想创建出现在按钮上的鼠标的图像，每个按钮都有单独的图像要弹出。

我把按钮放在下面；悬停时，他们会在其上弹出一个图像。

<div><a href="#">button 1</a></div>
<div><a href="#">button 2</a></div>
<div><a href="#">button 3</a></div>

【问题讨论】：

这会帮助你stackoverflow.com/questions/15274123/…
请查看jsfiddle.net/soyuka/vvVwD/1

标签： javascript jquery tooltip

【解决方案1】：

您可以将不同的jquery tooltip 图像添加到不同的按钮。在这种情况下，您需要提及要在哪个按钮中添加哪个图像。我为每个按钮添加了图像 url 到 data-image 属性。最后你需要为每个按钮调用tooltip函数。

不要忘记将title 属性添加到a 标签。

HTML：

<div>
    <a href="#" data-image="http://lorempixel.com/200/200/sports/" title="">button 1</a>
</div>
<div>
    <a href="#" data-image="http://lorempixel.com/200/200/food/" title="">button 2</a>
</div>
<div>
    <a href="#" data-image="http://lorempixel.com/200/200/people/" title="">button 3</a>
</div>

js:

$('div a').each(function(){
    var imageUrl = $(this).data('image');
    $(this).tooltip({ content: '<img src="'+ imageUrl +'" />' });
});

jsfiddle link

您也可以按照以下方式调用tooltip函数-

$( document ).tooltip({
    items: "div a",
    content: function() {
        return '<img  src="'+ $(this).data('image') +'" />';
    }
});

jsfiddle link

【讨论】：

【解决方案2】：

您可以使用JqueryUI tooltip 创建可自定义、可主题化的工具提示。

这是一个fiddle，它有 3 个按钮，当鼠标悬停在上面时会弹出一个随机图像。

HTML：

<a id="id1" href="#" title="">button 1</a>
<a id="id2" href="#" title="">button 2</a>
<a id="id3" href="#" title="">button 3</a>

带有 JqueryUI 的 JavaScript：

$( "#id1" ).tooltip({ content: '<img src="http://loremflickr.com/320/240?random=1" />' });
$( "#id2" ).tooltip({ content: '<img src="http://loremflickr.com/320/240?random=2" />' });
$( "#id3" ).tooltip({ content: '<img src="http://loremflickr.com/320/240?random=3" />' });

我不确定这是否是你要找的？！

【讨论】：