jQuery LittleTIP (free) WWB8.2+

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.
There is a dedicated section for commercial extensions.
Post Reply
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

jQuery LittleTIP (free) WWB8.2+

Post by 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.
Last edited by Adendum on Fri Feb 27, 2015 3:05 pm, edited 1 time in total.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: jQuery LittleTIP (free) WWB8.2+

Post by supersonictt »

Amazing one Adendum :)
Thanks a lot for this one :)
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by Adendum »

You are welcome :)
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: jQuery LittleTIP (free) WWB8.2+

Post by 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" :D
Please try it and let me know :)
Thanks Adendum :)
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by Adendum »

:( I'll have a look at this and report back.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by 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.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: jQuery LittleTIP (free) WWB8.2+

Post by 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.
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by 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.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: jQuery LittleTIP (free) WWB8.2+

Post by supersonictt »

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

Thanks for the support Adendum :)
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by 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?
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: jQuery LittleTIP (free) WWB8.2+

Post by [RZ] »

yes, but i'm sleeping :lol:
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by 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
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by 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?
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by Adendum »

Updated and released to both locations.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by jordan »

oh already released your fast Paul ... . :shock: . 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
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by Adendum »

jordan wrote:$('.myTitleStop').removeAttr('title');
I like it...so added. Updated and available from both locations. Demo page updated accordingly.
jordan wrote:jQuery start: http://docs.jquery.com/Main_Page
Oh........been there so many times. :roll: I need jQuery for dummies :shock:
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: jQuery LittleTIP (free) WWB8.2+

Post by supersonictt »

@Jordan and Adendum:

Thank you so much for this java info, they are really useful :)
And Adendum thanks for the update :)
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by Adendum »

Thanks for the thanks but the thanks go to Jordan. Thanks Jordan! lol
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by Adendum »

pcllw wrote: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.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by Adendum »

UXRO wrote: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.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
Post Reply