jQUERY tooltip disbaled by bad css?


Hi from cloudy & wet UK wakefield :frowning:

I’m going through a process of elimination regarding a tutorial i went through in book jQUERY Novice to Ninja p.168.

Basically its not working in one site but it does in another.
For example on this page it works when you hover over StarTrackr you get the italian tooltip -
http://www.pauserefreshment.co.uk/tooltip_sitepoint_tutorial.html

But I just cant replicate the effect in this site when you hover over StarTrackr -
http://www.pauserefreshment.co.uk/la-cimbali-m1-manual.html

I suspect I have a script conflict but would just like to know if there is a css glitch before i go down the mystical rabit hole of script conflicts :mad:

Thanks Stomme I’ll try and get this post shifted to Javascript section - oh god i can feel the pain allready :frowning:

Well, when we did these with regular JS in the JS Live course, the tooltip itself (or the tooltip container… in the course we created a container around the anchor itself with JS) was set to position: relative and since the tooltip box was a child of that, it could be set to position: absolute.

Both of these can be done in CSS, but that depends on what your JS says.

Since I think it’s still ultimately a JS thing (and I can’t read jQuery to save my butt), hit the little flag on your first post to alert a mod and type in the message box that you think this might need moving to the JS forums (if they agree, it’ll get moved so you don’t have to start a new thread). Since jQuery is a bit modern I would expect that it’s using CSS classes instead of manually changing styles with Javascript.

Lawlz, but such a fickle, fickle love : )

Brilliant yes thank you :slight_smile: You fixed it…

I got rid of this bit of code which you identified as bogus -
<script> jQuery.noConflict(); // Use jQuery via jQuery(…) jQuery(document).ready(function(){ jQuery(“div”).hide(); }); // Use Prototype with $(…), etc. $(‘someid’).hide(); </script>

I’m now back in love with jQUERY :slight_smile:

Well, I did get an error

$ is not a function

mentioning specifically the
$(document).ready(function() {
when I tried clicking on that title.
And this line looks a little funny:


<script>    jQuery.noConflict();    // Use jQuery via jQuery(...)    jQuery(document).ready(function(){        jQuery("div").hide();    });    // Use Prototype with $(...), etc.    $('someid').hide();  </script>

At the very least, that should bring up errors in the HTML validator.

I thought to use jQuery you needed a script calling jquery.js from somewhere before any other scripts (assuming the other scripts use jQuery).

*edit nevermind, I see now that your js/script.js IS the jQuery. ok

but in any case, you are getting an error on the page that doesn’t work, so even if the CSS isn’t up to snuff, the $ var isn’t getting through so right now it’s a Javascript issue.


Your fickle love line must have been premonition. Ive noticed the tooltip somtimes sits on top and below where I place the code on this page -
http://www.pauserefreshment.co.uk/la-cimbali-m1-manual_2.html

Stangley when i change the text size to smaller it always sits as i want it ie directly below the text.

So my question is please - “How can you control the position of the tooltip so it always sits where you want it regardless of browser text size?”

Any insights welcome…