jQuery LittleTIP (free) WWB8.2+

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.

There are already more than 250 extensions available!
User avatar
Adendum
 
 
Posts: 795
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

jQuery LittleTIP (free) WWB8.2+

Post by Adendum » Wed Aug 08, 2012 5:29 pm

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: 439
Joined: Sun May 15, 2011 10:27 am

Re: jQuery LittleTIP (free) WWB8.2+

Post by supersonictt » Wed Aug 08, 2012 5:51 pm

Amazing one Adendum :)
Thanks a lot for this one :)

User avatar
Adendum
 
 
Posts: 795
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by Adendum » Wed Aug 08, 2012 6:03 pm

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: 439
Joined: Sun May 15, 2011 10:27 am

Re: jQuery LittleTIP (free) WWB8.2+

Post by supersonictt » Thu Aug 09, 2012 2:40 am

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: 795
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by Adendum » Thu Aug 09, 2012 10:56 am

:( 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: 795
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by Adendum » Thu Aug 09, 2012 5:41 pm

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: 439
Joined: Sun May 15, 2011 10:27 am

Re: jQuery LittleTIP (free) WWB8.2+

Post by supersonictt » Thu Aug 09, 2012 6:02 pm

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: 795
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by Adendum » Thu Aug 09, 2012 8:42 pm

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: 439
Joined: Sun May 15, 2011 10:27 am

Re: jQuery LittleTIP (free) WWB8.2+

Post by supersonictt » Thu Aug 09, 2012 11:51 pm

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: 795
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by Adendum » Fri Aug 10, 2012 8:49 am

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: 2291
Joined: Tue Nov 04, 2008 12:08 pm

Re: jQuery LittleTIP (free) WWB8.2+

Post by [RZ] » Fri Aug 10, 2012 1:07 pm

yes, but i'm sleeping :lol:

jordan
 
 
Posts: 845
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by jordan » Fri Aug 10, 2012 2:52 pm

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: 795
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by Adendum » Fri Aug 10, 2012 4:34 pm

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: 795
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by Adendum » Fri Aug 10, 2012 5:06 pm

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: 845
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jQuery LittleTIP (free) WWB8.2+

Post by jordan » Fri Aug 10, 2012 5:17 pm

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

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests