www.wysiwygwebbuilder.com

[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!

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

Fantastic - I love it!

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! 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!

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

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

* 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.

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.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.

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.

thank you for your feedback.
enjoy!

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

if you add a # as a prefix, then the layer id, you can display a layer as a tooltip, also with images!

right, i've misread your post. apologies.
if you want a dedicated/paid code, you can contact here: www.magnawebstudio.com
please provide details in full as to check if will be feasible as soon as possible.
w/kind regards.

thank you for your suggestion.
i will try to spend some time to learn about the extension manager.

* 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] toolip, 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.

[RZ] wrote:* 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] toolip, 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.

This extension is not shown on WB8.5.2 please check it.
Is it possible to download all your extension once in one folder?

what do you mean by "this extension is not shown"?

[RZ] wrote:what do you mean by "this extension is not shown"?

Hi Rabbi,

Oops! Sorry it is my mistake.

so, i guess it does work for you now?

the extension is working fine at my end and it is listed in the toolbox.
in that case you should contact support [at] pablosoftwaresolutions [dot] com.

OR

are you talking about the extension manager to download/install/uninstall/update?

i'm sorry, unfortunately won't be available in the extension manager but in mediafire.
i will see if i can put them available for download via the extension manager, but not right now... (as soon as i can)
anyhow, many many thanks for your interest!!

[RZ] wrote:i'm sorry, unfortunately won't be available in the extension manager but in mediafire.
i will see if i can put them available for download via the extension manager, but not right now... (as soon as i can)
anyhow, many many thanks for your interest!!

Hi Rabbi,

Thanks. I will rather donate than to pay for mediafire and I will be waiting....

you DON'T need to pay *nothing* for mediafire.
anyhow, donations are highly appreciated; take in count that the only valid link is in the signature.
donations are managed only by paypal.
thank you!

this text is <b>bold</d> (this text is bold)
this text is <i>italic</i> (this text is italic)

not all the html tags but a limited set.
recommended ones are: <big>big</big>, <small>small</small>, <u>underline</u>, <b>bold</b>, <i>italic</i>, <em>emphasize</em>, <br> (for a line break), other tags may cause unpredictable (and erratic) results.
in the case you use these tags, you must replace the standard tooltips by this extension, otherwise you will see the tags as normal text.

no all the people read instructions...
this is the way you can prove i give support as fast as i can...

(yes you are right, i should write better instructions)

[RZ] wrote: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.

Hi,
I have a text area and open this object properties by right click
I still don't understand where I would write the tooltips text.
Bests Lenny

please read the wb help about the tooltips.
usually in text links, are called "title"; in images, "alternate text" and/or "title" (depending on the browser), etc...

when you add this extension in your page, you just choose a few custom options, but the rest of the work is automatically done...

* NEW in version 1.1.0:

-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; 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.

the title property of any object such as an image or a link is used as 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).

... ...

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...

Outstanding stuff Thank you!!

appreciated, thank you for your feedback!

RZ,
Yes, you do offer very useful extensions ....BUT....Since you are requiring a donation for a 'legal' (copy) of your extensions, they (your extensions) should be listed under 'paid' extensions since this is the only way to obtain them. IMHO

this means that you haven't read in full and didn't understand what is stated here: http://www.magnawebstudio.com/developer
no one complained about this
however, if you want to donate, you are welcome
all my extensions were for free until some people started to misuse my work, my time and efforts supporting every extension among other unpleasant details...
i dont understand why you didnt say thanks... at least...
ps: and it is not 'legal' but LEGAL, and i mean it in all of its extent

[RZ] wrote:this means that you haven't read in full and didn't understand what is stated here: http://www.magnawebstudio.com/developer
no one complained about this
however, if you want to donate, you are welcome
all my extensions were for free until some people started to misuse my work, my time and efforts supporting every extension among other unpleasant details...
i dont understand why you didnt say thanks... at least...
ps: and it is not 'legal' but LEGAL, and i mean it in all of its extent

With all due respect RZ, I do admire you....AND....your work as I've said in previous posts throughout my 8 years on this forum, and I have read your terms and I'm certainly not complaining, and do thank you for all that you do. Still, If you charge for your extensions they should be in the 'paid' section. Our Forum moderators are always quick to re-direct a post that is posted under the wrong topic. I don't know, and honestly don't care if anyone else complained to you. My post is an observation not complaint, and one that Admin should decide.

Thank you

ps: it's don't and didn't

again, you have not read what is stated in the link i gave you!

[RZ] wrote:again, you have not read what is stated in the link i gave you!

Hi RZ, i'm new to the extension game. I see you made a lot of them and i would like to try some. I would not mind donating 10 or 20 dollars for them, but your donate model bothers me a little. If i would like 10 extensions i would need to pay 100 dollar and wait for a refund.

Is it possible to make another donation/payed model where a user pays you like 10 or 20 dollar and gets access to all of your existing extensions, without a refund? At least make such a model for the forum users of WWB. I just don't feel like paying 100-200 dollar for the extensions i like and wait for a refund. But i would gladly pay you 10 to 20 dollars for the whole list without a refund.

And when you make a new extension, people can choose to pay again for access to a list where the newer extensions are available.

online demos are available; if not, this is because i'm working in new versions
so you can see what you are getting
you don't need to wait for refunds; refunds take less time than a regular payment and are instantly made when the extension is sent
do you want more than (widely tested and full working) 70 extensions for 10 or 20 dollars?

[RZ] wrote: do you want more than (widely tested and full working) 70 extensions for 10 or 20 dollars?

What do you want to say with that? At the moment i can get them all 70 with 0 dollars.. Just trying to give you a idea, because you are clearly stuck between commercial and freemium.

I have never seen such a model where a user needs to pay 700 dollar for a extension library and get 700 back.

It's not about protecting your copyright. A license that protects it can be attached to a free version on this forum. And what's the diffference? I will spread all 70 across the globe with or without a donation+refund if i would like..

Go premium and ask a fair price per extension (and no 10 dollar per extension is not fair for anybody besides you) or stay freemium and let me get this extensions. If i find myself using some of them i will donate offcourse. Thats the whole meaning of freemium.

But with this model i can't go anywhere. I'm just not dropping 700 dollars for 70 extensions and get a refund, thats just a strange model no one on the planet uses. Choose your path imho.

you sent me a private mail a few days ago...
and now you are doing the same and the same in the forum...!
are you saying that no one on this planet goes with this model? are you sooooo sure? or perhaps i'm working with people from mars?
from your mails and your posts i'm understanding what your intentions are...
the more complains the less want to pay... although i never asked for money like you want to [incorrectly] state!
however, while you are discussing just your point of view and maybe the same for a few guys that always want all for free and never pay the others' hard work, i'm working in a new version of this extension and many others, even new ones! also i'm working in a new paid system based on the feedback of many satisfied users that do see unfair that my extensions have been for free so many years

So you got that mail. Well, let me start of with saying if you ignore stupid ideas from customers by e-mail, than ignore them also when they ask them in a public forum.

And what you know about my intentions? Spread them on the internet? Just because i ask for the whole library and i am willing to pay for it?

My only intension is to give feedback on my experience. I am not stating that i want anything for free, i will gladly pay. But if something is offered for free, i want to get it easy without paypal etc.

But never mind, i understand it's a sensative subject. Let's get back to business:

I get a 404 when viewing a lot of demo's on your extensions. Could you please fix that so i can get a better idea of what to order.

well, i never said you sent me stupid mails...
and NEVER ignore mails nor posts, customers or not customers (as far as i can remember, you never paid me, so you are not a customer and i kindly answered your mails)
yes, about the 404 you are totally right
i temporarily removed the demos until the new versions are ready -- unfortunately there are other reasons but i humbly think that are beyond of this scope; however, will soon be available more demos
with regards and thank you for your thoughts

* 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.

to see these new features in action, please go to the updated online demo, scrolldown the page, and check out the two "stress" panels.

* 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.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.3:

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

* New in version 1.2.1.4:

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

* New in version 1.2.1.5:

- Improved compatibility with Chrome 52+