magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Tooltip


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


HTML 4.01 Transitional
W3C compliant


DEMO


* Just a brief about some of the changes that were made lately...

* 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.
- 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('ThisObjectId', '$new tooltip text');
  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: ^ pointer 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_repeat = '[left | center | right]
                                         [top | center | bottom]';
rzTooltip.container_background_position = 'no-repeat | repeat[-x | -y]';


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


etc, etc...


Enjoy!
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with