具有不同 onhover 和 onclick 内容的 jQuery 高级工具提示

发布于 2024-09-29 17:05:28 字数 870 浏览 4 评论 0原文

我必须实现一个奇怪的要求,如下所示:

  1. 用户可以将鼠标悬停在链接上并获得描述性文本,例如“此处有一些文本”
  2. 用户可以单击相同的链接并获得完全不同的描述 性文本 可能还包含标记的文本(例如:一些其他文本

我已经看过一些 jQuery 插件,但大多数都与 onhover 或 onclick 一起使用,但不能同时使用两者。此外,他们似乎在其内容中使用“标题”属性。

所以我的问题是:这个功能可能吗?是否有一个 jquery 工具提示插件,我可以在其中为 onhover 和 onclick 事件定义不同的内容?还有其他方法可以实现这一目标吗? (Javascript 不是我的强项之一)。

我也愿意接受关于简单的独立 javascript 库的建议,但如果它们是 jQuery 插件那就最好了。

谢谢。

答案:

借助simpletip

Html代码

<p>Hello <a id="test" title="some text here">world</a> again</p>

和javascript

$("#test").simpletip({ 
    persistent: true,
    content: '<b>Some</b> other <i>text</i> here.'
}); 

I have to implement a strange requirement that goes as follows:

  1. Users can hover on a link and get a descriptive text like "some text here"
  2. Users can click on the very same link and get a completely different
    text that might also contain markup (Example : some other text here)

I have looked at some jQuery plugins but most of them work with onhover OR onclick but not both. Also they seem to be using the "title" attribute for their content.

So my question is: is this functionality possible? Is there a jquery tooltip plugin where I can define different content for onhover and onclick events? Is there another way to achieve this? (Javascript is not one of my strong points).

I am also open to suggestions for simple standalone javascript libraries but it would be best if they are jQuery plugins.

Thank you.

Answer:

With the help of simpletip

Html code

<p>Hello <a id="test" title="some text here">world</a> again</p>

and javascript

$("#test").simpletip({ 
    persistent: true,
    content: '<b>Some</b> other <i>text</i> here.'
}); 

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

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

发布评论

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

评论(2

对岸观火 2024-10-06 17:05:28

您如何使用 jQuery 插件来显示精美的 onclick 工具提示和标准文本 (onhover) 的标题属性?

How about you use jQuery plugin to display fancy tooltip onclick, and a title attribute for standard text (onhover)?

奢华的一滴泪 2024-10-06 17:05:28

您可以使用 .data() jquery 将文本附加到每个元素,然后显示它。它甚至可以将单击和悬停文本保存在不同的数据对象中,因为您可以附加复杂的对象。

You could attach text to each element using the .data() jquery and then display that. It could even hold both the click and hover text in different data objects as you can attach complex objects.

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