Tipsy tooltip problem

I tried adding the code that I found here; http://www.fmcodes.com/t291-how-to-add-tipsy-tooltip

But it's not working....

Does anyone know a code that may work?

bump

I think the best way to get this working is to ask on there forum as this is not a code that we host on FM

That site is sadly dead.

What's the URL of the forum you tried installing it on + is it still installed on that forum ?

Let me know

Ange Tuteur wrote:What's the URL of the forum you tried installing it on + is it still installed on that forum ?

Let me know

I tried installing the code in my site; http://www.bleachstory.net/

No, I removed the code since it was not working.

Try reinstalling everything, if there are any problems let me know and I'll check to see what's preventing it from functioning.

Ange Tuteur wrote:Try reinstalling everything, if there are any problems let me know and I'll check to see what's preventing it from functioning.

Reinstalled it but it's still not working.

When I hover around a topic title, it shows nothing.

I see. Try the following instead, it should be a lot easier. Go to Modules > JavaScripts codes management > Create a new script

Placement : In all the pages

Code:

(function() {
  document.write('<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.2/jquery.tipsy.css" rel="stylesheet" type="text/css" />');

  $(function() {
    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.2/jquery.tipsy.min.js', function() {
      $('a').tipsy({gravity: 's'});
    });
  });
})();

I added it to all links using south gravity. You can see here for more information :
http://onehackoranother.com/projects/jquery/tipsy/

So just to be clear; I should add the above JS code and the CSS found here right?

No, don't add anything from there. The script I gave you will add the JS and CSS from a CDN.

To apply the tooltip to elements, just place your code where I have $('a').tipsy({gravity: 's'}); in the getScript callback function.

The code works but when you hover over a topic title the tool-tip appears and begins to shutter like crazy.

It's hard to explain. I think if you go to my site and see, you would understand what I'm saying.

Looks like the toolbar margin offset is causing that. Try changing the gravity from 's' to 'n' to see if that helps.

Ange Tuteur wrote:Looks like the toolbar margin offset is causing that. Try changing the gravity from 's' to 'n' to see if that helps.

It works!

But if I may ask; why is the tool-tip appearing way lower from the topic title?

I was correct it's caused by a 30px margin. Mm.. try adding the following rule to your stylesheet.
Display > Colors > CSS stylesheet

Code:

body {
  margin-top:0 !important;
  padding-top:30px;
}

It'll get rid of the 30px margin caused by the toolbar and replace it with a padding instead. Although when you do close the toolbar there'll be a slight gap, but it should fix the position of the tooltips.

Ange Tuteur wrote:I was correct it's caused by a 30px margin. Mm.. try adding the following rule to your stylesheet.
Display > Colors > CSS stylesheet

Code:

body {
  margin-top:0 !important;
  padding-top:30px;
}

It'll get rid of the 30px margin caused by the toolbar and replace it with a padding instead. Although when you do close the toolbar there'll be a slight gap, but it should fix the position of the tooltips.

Thanks alot mate!

Topic solved.

You're welcome.

Topic archived

Have a great weekend.