Positioning tooltips Created Sep 7, 2009

You definitely seem to have a proper setup. Can I see a live demo about this? And nice to read this nicely formatted forum post!

Hi Tero

I'm afraid to say I can't post what I am working on as I am behind a thousand firewalls and working on a private development server. I can't even FTP to a public server at the moment :(

I notice in my examples provided that I have mixed up my classes and id's, in my files I am using class="tooltip" for the tooltip and class="demotip".

Any advice on this is appreciated. Is the term tooltip reserved in any way?

Thanks

hubub

Hello again Tero

One thing I am curious about is the location of the tooltip container in the flow of the HTML. At the moment I have it located at the end of my HTML, does this have an impact on how it performs?

Thanks

hubub

Tooltip is positioned in relation to the trigger position. Trigger element's position is calculated with jQuery's position() method.

And no. CSS class names are never hardcoded in jQuery Tools.

From what is written for jQuery's position() function it returns position "...relative to its offset parent". In case you have absolutely positioned element somewhere on page and inside trigger element positioned on 0,0 hint will be shown on position 0,0 of document rather than correct position. I think function offset() should rather be used since it returns position "...relative to the document".
Today I had the same problem solved it with replacing the position() function with offset().

Do you have an example of what you did? I do use a lot of position: relative / absolute in the layout I am doing so figure it probably has something to do with that.

I have tried doing the following:

$("span[title],a[title]").addClass("tooltip").tooltip({
	offset : [200, 500],
	tip : '.demotip'
});

This aligns my first tooltip but the rest have a hernia.

As always, any advice is appreciated.

hubub

P.S. I think the same thing is affecting the overlay I have been dabbling with. If I can crack this then I think everything will fall into place.

I have actually changed the code inside tooltip component.
I believe author should fix this, but until then you can just find the function 'position()' inside the component code and replace it with 'offset()'. There are just two instances of that function inside tooltip component.

Be careful if you have downloaded more than one component in the same .js file, since other components may also use position() function.

Hmmm I wonder if there is a way to override this when creating tooltips instead of hacking the source...

OK. Need to study / test this offset() issue. I'll be pushing 1.1.1. out within two weeks or so. And "hubub" - I really would like to see your page.

Perhaps I will be able to show you in the next couple of weeks... until then I am afraid I can't share.

My first tests show that the offset() indeed provides better results. It will definitely be used on the upcoming release.

Is it worth me implementing the suggested patches above in the mean time?

Yes. Simply replace those position methods with offset just like you said. They simply work better in every possible situation.

That seems to have sorted things out straight away...

@bercium: thanks for pointing me in the right direction

@Tero: I have been active in a few forums over the years, some more helpful than others, I have to say I have been impressed with the activity in here.

Keep up the good work!

hubub

Thank you. I have to say that I'm more active now when I have just released a new version - to see if it has any crucial bugs. At the same time I'll answer to peoples needs.

I was glad to see that both the initial release and this one were both very stable and only minor tweaks are needed.

Firebug is showing that my tooltips are indeed appearing just fine, but they're being set to top:875.333px; left:731.1px; - what am I doing wrong?

hi i have a problem with tooltip. i am using dynamic absolute position. but my problem is that tooltip show at different position on different resolution screen

my code is here

 
$("#demo").tooltip({
   // tweak the position
   
   offset: [100, 30],
// use the "slide" effect
      effect: 'slide'
// add dynamic plugin with optional configuration for bottom edge
});

and html is

       <div id="demo"> Real Estate Resources</div> 
        <div style="position: absolute; top: 7px; left: 0;  display: none;" class="tooltip2">
         <h4>Real Estate Resources</h4>
              <ul>
                 <li><a href="http://listingtvspots.com/silver/real-estate-dictionary/"> Real Estate Dictionary</a></li>
                 <li><a href="http://listingtvspots.com/silver/mortgage-calculator/"> Mortgage Calculator </a></li>
                 <li><a href="http://listingtvspots.com/silver/property-tax-information/"> Property Tax Information </a></li>
                 <li><a href="http://listingtvspots.com/silver/credit-score/"> Credit Score </a></li>
               </ul>
            </div>

http://listingtvspots.com/silver/

please help me .how we can fix this one.