CODEWITHSUNDEEP
javascriptjquery
Designing Studios
Designing Studios

Reputation: 41

Tipsy tooltip is not working

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 i.e. (Tag, Facebook, Twitter icons etc...) can any one help me in this please...

Upvotes: 1

Views: 1415

Answers (4)

peduarte
peduarte

Reputation: 1677

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

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

Upvotes: 1

Thein Hla Maw
Thein Hla Maw

Reputation: 683

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

Upvotes: 0

Muhammad Saifuddin
Muhammad Saifuddin

Reputation: 1294

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>

Upvotes: 0

Spacedman
Spacedman

Reputation: 94317

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

Upvotes: 0

Related Questions