激活使用通用 div 作为提示的工具提示... (jQuery)
我环顾四周,但似乎找不到我正在寻找的答案。
我想做的: 我有一个 div,其中包含内容,包括其他元素。它要在页面上保持隐藏状态,但我想将其用作三个不同元素的工具提示而不重复工具栏 div。
因此,例如,我有一个 div 和 3 个图像:
<div id='tooltip_div'>This is <b>a tooltip</b> to be used for the three images</div>
<img src='1.jpg' />
<img src='2.jpg' />
<img src='3.jpg' />
我想要使用 #tooltip_div
div 的内容将工具提示附加到每个图像。我看过 this 但似乎期望工具提示紧接在目标元素之后。这需要为我想要关联的多个目标元素复制工具提示 div(因此,我必须将该 div 复制三次,每个图像之后一次)。
如果我可以做 $('img').tooltip('#tooltip_div')
,基本上告诉插件哪个元素用于工具提示,那就太好了。
如果有人可以提供帮助,那就太好了!谢谢!
I've looked around a bit, but can't seem to find the answer I'm looking for.
What I want to do:
I have a div that has content in it, including other elements. It is to remain hidden on the page, but I want to use it as the tooltip of three different elements without duplicating the toolip div.
So, for example, I have a div and 3 images:
<div id='tooltip_div'>This is <b>a tooltip</b> to be used for the three images</div>
<img src='1.jpg' />
<img src='2.jpg' />
<img src='3.jpg' />
I want to attach a tooltip to each of those images with the content of the #tooltip_div
div. I've looked at this but it seems that is expects the tooltip to come immediately after the target element. This would require duplicating the tooltip div for however many target elements I want to associate it with (so, I would have to have that div three times, once after each image).
It would be great if I could sort of do $('img').tooltip('#tooltip_div')
, basically tell the plugin which element to use for the tooltip.
If anyone can help, that would be great! Thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
尝试Tipsy。这是很棒的插件并且很容易激活
Try Tipsy. It's great plugin and easy to activate
我使用过的另一个工具提示插件确实支持此功能。
jQuery Tools Tooltip
注意
提示
选项,您可以指定单个工具提示元素。There is another tooltip plugin that I've used that does support this.
jQuery Tools Tooltip
Notice the
tip
option which you can specify a single tooltip element.尝试提示提示。您向想要工具提示的内容添加
title
属性,然后添加“tip”类,这意味着您可以执行以下操作:您还可以将生成的工具提示的内容自定义为任何内容您想要的,使用
content()
方法。可以使用.content($("#tooltip_div").html())
; 从隐藏的 div 中提取内容Try TipTip. You add a
title
attribute to the things you want to have a tooltip, and then add the class 'tip', meaning you can then do:You can also customise the contents of the resulting tooltip to be whatever you want, using the
content()
method. Possibly pull in your content from your hidden div using.content($("#tooltip_div").html())
;醉意更好:http://onehackoranother.com/projects/jquery/tipsy/。
激活 HTML,设置静态消息(您的 div),然后就完成了。
给你的图像一个类,比如
class="images"
。然后你只需输入:
$(".images").tipsy({html: true, Fallback: "*你的 div,你的内容,等等*});
Tipsy is even better : http://onehackoranother.com/projects/jquery/tipsy/.
Activate HTML, set a static mssage (your div) and you're done.
Give your images a class, say
class="images"
.Then you just type :
$(".images").tipsy({html: true, fallback: "*your div, your content, whatever*});