JQuery Tool tips

Question

I want to create a tool tip for an image with a link now I had it working one but it doesn't work with the 2nd image.

Here is my Sample Code:

<!-- 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>

and here is my script that makes it all happens:

<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>

but not working please help. here is the sample Jquery I am trying todo

Answer 1

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

Explanation:

The tooltip plugin provides a function called tooltip that is part of the jQuery object. Once you load jquery and the tooltip plugin, every jquery object you create [FYI: $(selector) creates a jquery object] can call that function on itself.

When you call tooltip2() you are calling a function that does not exist, and so nothing happens.

Does that make sense?

Answer 2

I would try this for the 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>

and this for the 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>