jQuery LittleTIP (free) WWB8.2+

[Adendum]

A simple utility to change the standard browser tooltip appearance. Similar to the Nice Title extension but has some subtle differences.



Simply style your tooltip's to suit your site design, set any of the features you want to use (delay, fade, opacity and distance from links) and ensure all your links have something worth showing in the TITLE area and you are off and running. I don't expect anyone will have problems but check the help file first.

Have fun.

Made with EB4, therefore suitable for WWB8.2+ only.

[supersonictt]

Amazing one Adendum
Thanks a lot for this one

[Adendum]

You are welcome

[supersonictt]

Found something weird!

I put an image (facebook icon) and set the title to "Join us on Facebook" and I put the extension and set its properties. Then I inserted a CSS menu.
In preview, when you put the mouse over a navigation item in the css menu, it displays a tooltip (a very small box with nothing inside).
Weird!
The only workaround I found is to set the title attribute for the images in the generated html to "titlee"
Please try it and let me know
Thanks Adendum

[Adendum]

I'll have a look at this and report back.

[Adendum]

I just added a CSS menu to my test project and I didn't see any boxes appear.....until I added ALT TEXT to the CSS menu...then I got the ALT TEXT in the box.

[supersonictt]

Right, I found the problem; it has nothing to do with the css menu, it is because the css menu is inside a header layer.
Try adding a header layer, then add the extension, put the mouse over the layer and you will get what I mean.

[Adendum]

Yup - I get the same from the demo page. ANY OBJECT with a TITLE (and it would appear an ALT) tag gets the benefit of the extension's settings.....just as you would get from a normal browser tooltip. So there is nothing that can be done because the script is REPLACING the default browser tooltip.

[supersonictt]

Right, the only solution for that is to remove the "title" tag from the generated html file.

Thanks for the support Adendum

[Adendum]

I don't know if anything can be done If there are any jQuery guru's out there they may be able to suggest a change to the code used in the .js file but other than that all I can think of is increase the delay on the tooltip....or...don't use a layer, which I know is not a solution but I can't see what else can be done.

So...jQuery masters?

[[RZ]]

yes, but i'm sleeping

[jordan]

hello Paul,

add this to the littletip-1.4.js code …

=====================================================================================
elT.mouseover(function(){ // Function applied to title attribute on mouse over
var elemlT = $(this).attr('title'); // Store title information in a variable for further usage
this.tip = this.title; // Copy and expand littleTIP
this.title = ""; // Remove default tooltip

if (elemlT=='') {return false}; // STOP WHEN TITLE IS EMPTY

$('<div id="littleTIP"><
=====================================================================================

you could also create a filter function by changing this line …

=====================================================================================
var elT = $('.[title]').not('.myTitleStop'); // Store all title attributes in a variable for further usage
=====================================================================================

then you can add a class to objects that you want to be filtered from littletip (at least those that allow it)
ie. add to Layer1 – inside Tag – class='myTitleStop'
or if an anchor on the anchor
ie. add to Shape1 – inside anchor – class='myTitleStop'

though I think it's better to have no object with titles behind littletip
this is the simplest to do I think, without really having to change the script
hope this helps another great extension from you
+ thanks for the index update mail

[Adendum]

Jordan,

Nice one Jordan. I've tested both suggestions and have uploaded a new demo page using the edits.

The first change is spot on and any empty title no longer displays the tooltip.

The second edit does work (you can see it in action on the demo page) but you do still get the default browser tooltip after a short delay, which I guess is understandable. Unless I hear to the contrary I'll make a small change to the help file to include the inside tag addition and release the extension as version 1.0.0.1.

EDIT: I really need to learn more about jQuery....best place to start?

[Adendum]

Updated and released to both locations.

[jordan]

oh already released your fast Paul ... . . goOd it works

and yes the 2nd option in some browsers will show the tooltip on top
that's why I think it's better to not have a titled object underneath

you could also ie. add …
============================================================
var elT = $('.[title]').not('.myTitleStop'); // Store all title attributes in a variable for further usage
$('.myTitleStop').removeAttr('title');
============================================================
this would remove the title when the class is added (though I would make that an option)

you could change the script of course more and more but this is the simplest

jQuery start: http://docs.jquery.com/Main_Page

[Adendum]

$('.myTitleStop').removeAttr('title');

I like it...so added. Updated and available from both locations. Demo page updated accordingly.

jQuery start: http://docs.jquery.com/Main_Page

Oh........been there so many times. I need jQuery for dummies

[supersonictt]

@Jordan and Adendum:

Thank you so much for this java info, they are really useful
And Adendum thanks for the update

[Adendum]

Thanks for the thanks but the thanks go to Jordan. Thanks Jordan! lol

[Adendum]

Is the final version 1.0?

Current version is 1.0.0.2 available from Extension Manager in WWB, the official extensions website and my own demo site.

[Adendum]

For some reason my question was removed. Kinda annoying. Anyway is this extraction working in latest build. I see last post was 2011 so i don't know if it is. I add it and i tried it and it didn't work. So some help would be appreciated

Apologies for the delayed response - you posted on the day I left for Las Vegas, returned yesterday afternoon.

The extension works as expected BUT because it was built some time ago you need to set the page properties to use jQuery 1.7.2 rather than the later version that is the default.

You can check the demo page and view source to see what version of jQuery is in use.