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

Question

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

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

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

Answer 1

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

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

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>

Javascript 与 JqueryUI:

$( "#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" />' });

我不确定这是否是您要找的东西？！

Answer 2

您可以向不同的按钮添加不同的 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

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

how to add tooltip image to more than one buttons

javascript

jquery

tooltip