激活使用通用 div 作为提示的工具提示... (jQuery)

发布于 2024-11-25 13:20:43 字数 716 浏览 1 评论 0原文

我环顾四周,但似乎找不到我正在寻找的答案。

我想做的: 我有一个 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

绮烟 2024-12-02 13:20:43

尝试Tipsy。这是很棒的插件并且很容易激活

$(".tip").tipsy();

Try Tipsy. It's great plugin and easy to activate

$(".tip").tipsy();
回忆追雨的时光 2024-12-02 13:20:43

我使用过的另一个工具提示插件确实支持此功能。

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.

西瓜 2024-12-02 13:20:43

尝试提示提示。您向想要工具提示的内容添加 title 属性,然后添加“tip”类,这意味着您可以执行以下操作:

$(".tip").tipTip();

您还可以将生成的工具提示的内容自定义为任何内容您想要的,使用 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:

$(".tip").tipTip();

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());

開玄 2024-12-02 13:20:43

醉意更好: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*});

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文