jQuery 工具提示

Question

我想为带有链接的图像创建一个工具提示，现在我可以使用它，但它不适用于第二张图像。

这是我的示例代码：

<!-- trigger element. a regular workable link --> 
<a id="test" title="Name - Title">Name</a> 

<!-- tooltip element --> 
<div class="tooltip"> 
 <div><span class="name">Name</span><br />
Title
<span><a href="#">more info»</a></span></div>
</div>

<!-- trigger element. a regular workable link -->
<a id="test2" title="Name - Title">Name</a> 

<!-- tooltip element --> 
<div class="tooltip2"> 
 <div><span class="name">Name</span><br />
Title
<span><a href="#">more info»</a></span></div>
</div>

这是我的脚本，让这一切发生：

<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready

$(document).ready(function() {

 // enable tooltip for "test" element. use the "slide" effect
 $("#test").tooltip({ 
 effect: 'slide',
    offset: [50, 40] }); 

 $("#test2").tooltip2({ 
 effect: 'slide',
    offset: [50, 40] }); 
});
</script>

但不工作请帮忙。这是我正在尝试做的sample Jquery

Answer 1

 $("#test2").tooltip({ // You had .tooltip2
 effect: 'slide',
    offset: [50, 40] }); 
});

说明：

工具提示插件提供了一个名为tooltip 的函数，它是jQuery 对象的一部分。加载 jquery 和工具提示插件后，您创建的每个 jquery 对象 [仅供参考：$(selector) 创建一个 jquery 对象] 可以自行调用该函数。

当您调用 tooltip2() 时，您正在调用一个不存在的函数，因此没有任何反应。

这有意义吗？

Answer 2

我会为 html 尝试这个...

<!-- trigger element. a regular workable link --> 
<a id="test" title="Name - Title">Name</a> 

<!-- tooltip element --> 
<div class="tooltip"> 
 <div><span class="name">Name</span><br />
Title
<span><a href="#">more info»</a></span></div>
</div>

<!-- trigger element. a regular workable link -->
<a id="test2" title="Name - Title">Name</a> 

<!-- tooltip element --> 
<div class="tooltip"> 
 <div><span class="name">Name</span><br />
Title
<span><a href="#">more info»</a></span></div>
</div>

这用于 javascript...

<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready

$(document).ready(function() {

 // enable tooltip for "test" element. use the "slide" effect
 $("#test, #test2").tooltip({ 
 effect: 'slide',
    offset: [50, 40] }); 
});
</script>