提示工具提示不起作用

Question

In this page , I have implemented tipsy tooltip, jbgallery two jquery plugins. You can observe tool tip appears when you rollover logo, i have written the same for icons appearing right bottom of the page ie (Tag, Facebook, Twitter icons etc...) can any one help me in this please...

Answer 1

It seems like you are missing the class .tooltip on those anchor tags. Try adding them in and see if it works. Eg:

<a href="#" class="twitter tooltip">twitter</a>

* EDIT *
Replace the $ with jQuery and replace $(function(){ with jQuery(document).ready(function(){

* EDIT *
Try this:

$('.tooltip').each(function(){
    $(this).tipsy({fade: true});
});

Answer 2

and I think the tipsy is reading the original-title attribute in your case to display title.which is missing in (Facebook, Twitter anchor tags.)

I copy this code from your given url. just inspect the elements where I found a little difference in your both places where you added tipsy class.

[original-title is available here.]
<a href="#" class="tooltip" original-title="test">
<img src="images/logo.png" alt="" title="">
</a>

[attribute missing original-title here]
<a href="#" class="tooltip twitter" title="Twit Icon">twitter</a>
<a href="#" class="tooltip facebook" title="FB Icon">facebook</a>

Answer 3

How are those buttons getting into the DOM? If I run your tooltip activation code on the console:

 $('.tooltip').tipsy({fade: true});

then it shows me it has added the tipsy function to the icons (and hovering works).

I don't think the DOM is properly loaded when your bit of script runs. Stick it at the bottom of the page, or in a jQuery(document).ready(function(){ block

Answer 4

When I add a container class(.jbg-caption) in selector, it works. Please try to replace with the following code.

$(function() {
$('.tooltip').tipsy({fade: true});
}); 

to

$(function() {
$('.jbg-caption a.tooltip').tipsy({fade: true});
});