[rz] Advanced Tooltip *** UPD 2016-Jul-25 ***

In this section you can announce self-made paid extensions.
*** THIS SECTION CONTAINS PAID EXTENSIONS ONLY ***
User avatar
[RZ]
 
 
Posts: 2286
Joined: Tue Nov 04, 2008 12:08 pm

[rz] Advanced Tooltip *** UPD 2016-Jul-25 ***

Post by [RZ] » Wed Sep 12, 2012 10:45 pm

[rz] Tooltip v1.2.1.5

This lightweight extension allows you to transform the default system tooltips to a far more attractive ones that fit your design scheme.

DEMO

HTML 4.01 Transitional
W3C compliant


* New in version 1.2.1.5:

- Improved compatibility with Chrome 52+

* New in version 1.2.1.4:

- Fixed a z-order issue with [rz] Flat Side Menu extension.

* New in version 1.2.1.3:

- Improved tooltips handling for those objects/extensions that connect with Instagram (useful for images with hashtags).

* New in version 1.2.1.2:

- Resolved a sporadic minor issue in RWD scenarios when the browser reaches a breakpoint while reducing its size.

* New in version 1.2.1.1:

- Resolved a minor issue when interacting with [rz] Shopping extension.
- Resolved a minor issue when dragging some objects.
- Tweaked code for better backward and crossbrowser compatibility.

* New in version 1.2.1:

- Bubble support; this means that if a layer has a tooltip and a contained object within also has a tooltip, that object takes precedence over the parent's tooltip.
- If an object does not have a tooltip and it is contained within a layer that does have, the tooltip is "inherited" by that nested/contained object from its parent layer; this means that a tooltip remains visible even when the mouse is moved over the contents.
- Improved tooltip positioning when it is dynamically changed and the mouse is currently over an object with a tooltip.

* New in version 1.2:

- Added backward compatibility and "pixel perfect" support.
- Improved tooltip positioning for left-to-right and right-to-left schemes (covering all major browsers - even old versions like IE5, IE7 and IE8).
- Improved tooltip content composition.
- Opacity level option.
- The prefix '#' was improved to manage custom layers in addition to the standard preformatted text.
- The support of the prefix '^' for pointers to "as is" layers was removed as it is not needed anymore.
- When calling the attachTooltip(object,'$text'); function, now can also be attachTooltip('object_id','$text'); this means that the first parameter can refer to the target object itself or can be a string that contains the id of that object.
- Support for "on-the-fly changes" based on the 'rzTooltip.option=value;' structure (for advanced programming cases - see at the bottom of this document).

* New in version 1.1:

- Fix for some jQuery based image galleries that display the picture caption with a "$" prefix when the "apply to all tooltips" option is selected. This is also applicable for similar objects based in the title attribute. (If you are not experiencing issues interacting with other objects, you don't need this update.)
- Layers used as tooltips may contain script.
- Now is full compatible with the [rz] Layers extension set.
- Smart tooltips garbage sanitation.
- Doesn't interfere with objects that have events like onmouseover/onmouseout.
- Tooltips can dynamically be changed with this function call: attachTooltip(object,'message');
Where object is usually in this format: document.getElementById('myobject').
Just replace myobject by the actual object id.
The message can be as follows: 'this is a message', '$this is a message', '#MyLayer' or '^MyAdvancedLayer'.
According to the extension properties, the prefix '$' is to indicate that only this object will show the customized tooltip; the prefix '#' means that the extension will point to a layer and treat it as a tooltip instead of a simple text message; deprecated: the prefix '^' means that the extension will point to a layer that has script that the extension cannot resolve by itself and refuses to execute it, in that case, the developer is the responsible about the z-order and to set the layer as 'header/footer' in case the page is centered in the browsers.

* New in version 1.0.5:

- Fixed a bug introduced in image-only (with no color) background tooltip; in this case, the tooltip was not recognized in IE8 and earlier.

* New in version 1.0.4:

- Workaround that solves a bug (touchscreen devices false positive) in Maxthon browsers.
- Now supports linebreaks directly from the tooltip tag; no user intervention needed. This feature becames useful when the "apply to all, no - prefix needed" option is selected.
- A space in pixels between paragraphs can be defined, this means the space between lines after a line-break.
- A solution function was added: cleanTooltipGarbage(); this function allows to workaround a bug in mouseout event in browsers like Opera/Safari (or those with similar engines - for Safari, a stricter method is available); when a move/slide/hide object jQuery event takes place in links or objects that have [this enhanced] tooltip, the mouseout event won't be triggered, in that case, just add a call in that event to this function to clean any garbage that may remain on the screen. If you are experiencing issues and you don't know when and how call this function, simply enable it automatically in the extension properties dialog and let the extension do the work for you.

* New in version 1.0.3:

Option available to force the extension to show the custom tooltip on touch devices.
By default, this option should be disabled on touch devices as in system standard tooltips (because there is no mouse). Changes on this setting should be made only in specific contexts and only if you exactly know what you are doing.
This is a highly recommended update in order to avoid erratic behaviors on these device types.

* New in version 1.0.2:

- Improved startup (now doesn't interfere with other extensions' startup nor special position required in object manager).

* New in version 1.0.1:

- Maximum width can be defined for long tooltips texts.
- Long tooltips can be justified.
- Automatic text alignment change in right-to-left pages.
- Automatic tooltip box orientation in right-to-left pages.


How to use?

a. Fast

1. once you designed your page and added the tooltip texts to the proper objects, drag and drop this extension.
2. set the properties according to your design scheme.
3. set the "All tooltips" to yes.

Done!

b. Custom

You can have both methods, the standard tooltip and your own one in the same page!

Instead of the step #3, leave it as by default, this means "All tooltips" to no, so the prefix is required.
Change the tooltip messages that you want to selectively convert, just adding a "$" at the beginning of the message; i.e. change "this is a tooltip" to "$this is a tooltip".

Done!

c. Advanced

You can have the standard tooltips, the customized ones or the advanced tooltip scheme.

1. once you designed your page, add a layer for each advanced tooltip.
2. add images, shapes, texts, etc...
3. now, go back to the object, and in the title attribute, instead of type in a tooltip message, enter the prefix "#" followed by the layer ID; you can have as many layers (to be used as tooltips) as you want in the same page: for each advanced tooltip you point them as follows: #MyTooltipLayerOne, #ContactDetails,

etc...

Done!


Notes:

You can dinamically change the tooltip text!

If you want to change the title attribute by clicking an object, just do this:
on an onclick event, add a javascript function like this:
attachTooltip(document.getElementById('ThisObjectId'), '$new text for the tooltip');
or
attachTooltip(ThisObject, '$new tooltip text'); (from version 1.2)
replace 'TheObjectId' by the actual object ID or ThisObject by the actual object var
remove or replace the prefix according to your needs and type in the desired text for the message (or the pointer to a layer with the '#' prefix).

$ plain text
# points to a layer

(DEPRECATED: ^ point to a layer with complex script that cannot be executed with #)

From version 1.2, some specific-objects properties can be changed on-the-fly, i.e. via the onmouseover and

onmouseout events!

in 'onmouseover' event: enter the changes
in 'onmouseout' event: restore the original values

Some of the values that can be changed:

rzTooltip.tooltip_opacity = 100;

rzTooltip.container_background_color = '#000000';
rzTooltip.container_border_color = '#000000';
rzTooltip.container_background_image = './images/picture.jpg';
rzTooltip.container_background_position = '[left | center | right] [top | center | bottom]';
rzTooltip.container_background_repeat = 'no-repeat | repeat[-x | -y]';

rzTooltip.content_font_size = 10;
rzTooltip.content_font_color = '#000000';
rzTooltip.content_paragraph_space = 10;

etc, etc...


Enjoy!
Last edited by [RZ] on Mon Jul 25, 2016 4:31 pm, edited 21 times in total.

mnwitten
 
 
Posts: 143
Joined: Sun Aug 17, 2008 10:29 am
Location: Newfoundland, PA
Contact:

Re: Advanced tooltips

Post by mnwitten » Thu Sep 13, 2012 1:52 pm

I LIKE! I will be using this shortly. Now...please finish that video background extension!!! :)

User avatar
protectourlands
 
 
Posts: 720
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Advanced tooltips

Post by protectourlands » Thu Sep 13, 2012 7:15 pm

Fantastic - I love it!

User avatar
[RZ]
 
 
Posts: 2286
Joined: Tue Nov 04, 2008 12:08 pm

Re: Advanced tooltips

Post by [RZ] » Thu Sep 13, 2012 8:13 pm

mnwitten wrote:I LIKE! I will be using this shortly. Now...please finish that video background extension!!! :)
thank you! it will be ready later next week (i hope!)
administrator wrote:Awesome RZ! :D Thank you once again for sharing your great work with the rest of us.
thank you! glad to know you liked it.
protectourlands wrote:Fantastic - I love it!
thank you for your words!

User avatar
zinc
 
 
Posts: 1496
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom

Re: Advanced tooltips

Post by zinc » Fri Sep 14, 2012 1:59 pm

RZ love it. I can see me using this alot!!!! Thank you!!!! and have a great Rosh Hashanah ( ראש השנה ) :)

User avatar
[RZ]
 
 
Posts: 2286
Joined: Tue Nov 04, 2008 12:08 pm

Re: Advanced tooltips

Post by [RZ] » Fri Sep 14, 2012 2:15 pm

oh! thank you!! (תודה רבה חבר)

User avatar
[RZ]
 
 
Posts: 2286
Joined: Tue Nov 04, 2008 12:08 pm

Re: Advanced tooltips *** UPDATED Sep-27-2012 ***

Post by [RZ] » Thu Sep 27, 2012 11:36 am

* NEW in this version:

Maximum width can be defined for long tooltips texts.
Long tooltips can be justified.
Automatic text alignment change in right-to-left pages.
Automatic tooltip box orientation in right-to-left pages.

User avatar
[RZ]
 
 
Posts: 2286
Joined: Tue Nov 04, 2008 12:08 pm

Re: Advanced tooltips *** UPDATED Oct-16-2012 ***

Post by [RZ] » Tue Oct 16, 2012 12:06 pm

NEW in version 1.0.2:

Improved startup (now doesn't interfere with other extensions' startup nor special position required in object manager).

User avatar
[RZ]
 
 
Posts: 2286
Joined: Tue Nov 04, 2008 12:08 pm

Re: Advanced tooltips *** UPDATED Oct-17-2012 ***

Post by [RZ] » Wed Oct 17, 2012 2:41 pm

* NEW in version 1.0.3:

Option available to force the extension to show the custom tooltip on touch devices.
By default, this option should be disabled on touch devices as in system standard tooltips (because there is no mouse). Changes on this setting should be made only in specific contexts and only if you exactly know what you are doing.
This is a highly recommended update in order to avoid erratic behaviors on these device types.

dsl225
 
 
Posts: 36
Joined: Sun Feb 06, 2011 12:10 pm

Re: Advanced tooltips *** UPDATED Oct-17-2012 ***

Post by dsl225 » Tue Oct 23, 2012 7:04 am

Looks excellent but I don't understand how to setup...

"once you designed your page and added the tooltip texts to the proper objects, drag and drop this extension."
sounds stupid, but how do I add tooltip texts to a word in text area...?

User avatar
[RZ]
 
 
Posts: 2286
Joined: Tue Nov 04, 2008 12:08 pm

Re: Advanced tooltips *** UPDATED Oct-17-2012 ***

Post by [RZ] » Tue Oct 23, 2012 10:49 am

usually is the 'text' (and/or 'alternate text' as in shapes and images) property of the object.
you can reach this property opening the object properties dialog.

dsl225
 
 
Posts: 36
Joined: Sun Feb 06, 2011 12:10 pm

Re: Advanced tooltips *** UPDATED Oct-17-2012 ***

Post by dsl225 » Tue Oct 23, 2012 11:10 am

Thanks, got it in the meantime... :roll:

Works really nice, awesome!

User avatar
[RZ]
 
 
Posts: 2286
Joined: Tue Nov 04, 2008 12:08 pm

Re: Advanced tooltips *** UPDATED Oct-17-2012 ***

Post by [RZ] » Tue Oct 23, 2012 11:18 am

thank you for your feedback.
enjoy!

dsl225
 
 
Posts: 36
Joined: Sun Feb 06, 2011 12:10 pm

Re: Advanced tooltips *** UPDATED Oct-17-2012 ***

Post by dsl225 » Tue Oct 23, 2012 11:49 am

This extension allowed me to discover all the others you have done - that's really impressive!
Many thanks for your precious contribution!
Why aren't they listed in the extension manager yet? :?:

User avatar
[RZ]
 
 
Posts: 2286
Joined: Tue Nov 04, 2008 12:08 pm

Re: Advanced tooltips *** UPDATED Oct-17-2012 ***

Post by [RZ] » Tue Oct 23, 2012 3:11 pm

thank you for your encouraging words.
(because i didn't try the extension manager yet...)

Post Reply

Who is online

Users browsing this forum: No registered users and 0 guests