如何将工具提示图像添加到多个按钮
how to add tooltip image to more than one buttons
如何为多个按钮添加工具提示图片。我想创建出现在按钮上的鼠标图像,每个按钮都有单独的图像弹出。
我把按钮放在下面;悬停时,他们会在上面弹出一张图片。
<div><a href="#">button 1</a></div>
<div><a href="#">button 2</a></div>
<div><a href="#">button 3</a></div>
您可以使用 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" />' });
我不确定这是否是您要找的东西?!
您可以向不同的按钮添加不同的 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 +'" />' });
});
您也可以通过以下方式调用tooltip
函数-
$( document ).tooltip({
items: "div a",
content: function() {
return '<img src="'+ $(this).data('image') +'" />';
}
});
如何为多个按钮添加工具提示图片。我想创建出现在按钮上的鼠标图像,每个按钮都有单独的图像弹出。
我把按钮放在下面;悬停时,他们会在上面弹出一张图片。
<div><a href="#">button 1</a></div>
<div><a href="#">button 2</a></div>
<div><a href="#">button 3</a></div>
您可以使用 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" />' });
我不确定这是否是您要找的东西?!
您可以向不同的按钮添加不同的 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 +'" />' });
});
您也可以通过以下方式调用tooltip
函数-
$( document ).tooltip({
items: "div a",
content: function() {
return '<img src="'+ $(this).data('image') +'" />';
}
});