The "gpEasy TipTip plugin" is built by using the jQuery TipTip & vTip plugins to add "tool tips" to title attributes. Please read the documentation at the jQuery tipTip Plugin site--it will help you understand the basics of this plugin.
As of version 1.5 the gpEasy vTip plugin has been integrated into the this plugin to handle title attributes that are not given a class. Therefore, TipTip will only style those elements in which you have added one of the classes discussed below.
As of version 2.2 vTip now loads for IE7 and lower as the TipTip plugin does not function well with lower versions of IE. This will ensure that visitors will always see some type of styled tool tip when using the TipTip plugin. This will only be available for gpEasy 2.2+. Previous versions of gpEasy will not function with TipTip 2.2.
Minimum requirements: gpEasy CMS 2.2
Demos: top, , left, right, html, image.
How To Use
Add one of the gadgets to any layout. All anchor titles will be styled via the integrated vTip plugin automatically. To apply the TipTip tool tip style just add one of the classes discussed below to any element, including anchors. The TipTip plugin allows for more control over the tool tips whereas the vTip has only one setting.
For best results it is advised to add the class to the lowest level element. In other words, it's better to add the class to the element than the div that wraps the element, though the later will work most of the time.
Enabled classes (and ID) for TipTip plugin:
Self Hiding Gadgets
Please note that IE6 & 7 have a bug that causes hidden items to be displayed when in comparability mode. Sorry, but that is the life of an IE user.
License & Credits
This plugin was created from Drew Wilson's tipTip jQuery plugin. Here is the license and credits that are included in the tipTip jQuery plugin:
* Copyright 2010 Drew Wilson
* Version 1.3 - Updated: Mar. 23, 2010
* This Plug-In will create a custom tooltip to replace the default
* browser tooltip. It is extremely lightweight and very smart in
* that it detects the edges of the browser window and will make sure
* the tooltip stays within the current window size. As a result the
* tooltip will adjust itself to be displayed above, below, to the left
* or to the right depending on what is necessary to stay within the
* browser window. It is completely customizable as well via CSS.
* This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses:
I've only made four main colors for this plugin; black, white, red, and blue. I'm sure many of you would like the colors customized to your theme. That's easy enough to do by altering one of the current style sheets or even adding the custom styles to your theme's style.css file. For theme developers that would like to customize this plugin specific to their theme, please do so. You can include the custom plugin with your theme. If you would like it included here just send me the plugin styles or even upload it to gpEasy's plugin page, it's all open-source.
It's easy to remove specific gadget from being loaded by gpEasy CMS. Just look in the Addon.ini file and delete the code for the gadgets you want removed. They are three lines of code that look something like:
script = 'Gadget_TipTipStyle_Black.php'
class = 'Gadget_TipTipStyle_Black'
Any code in the ini file that has a ; at the beginning is a comment line. You can also just comment out the gadgets you don't want loaded before installing the plugin.
I'm sure some of you are asking why did I integrate this particular plugin into a gpEasy plugin and not a different one. One of the main things I liked about this plugin is its ability to remain within the proper boundaries of the browser window and utilize HTML within the title attribute. It's also pretty light weight and rather flexible. while it does have a few minor issues none of them are deal breakers. Many other plugins like this have issues that just wouldn't work in many settings and for the specific purposes I wanted. If you feel there is a better jQuery plugin for the job please feel free to modify this plugin with it and let me know how it works for you.
Of course we need to mention IE specifically. The tool tips do not look as good in IE as in other browsers. That's because IE does not support the necessary stylings. I've also disabled it for versions of IE below IE8 as it's doubtful those versions of IE will work well. IE6 definitely will not work with these types of tool tips.
If you feel there is a specific bug that relates to this plugin please let me know; However, please realize that many of the "bugs" may be related to the jQuery tipTip plugin and I can't do much about those until the developer fixes them or someone with good JS skills helps with this plugin. It has been tested with the latest versions of Chrome, Firefox, Opera, and IE--older browsers are not tested or supported.
Theme Specific Bugs
Please test the plugin with other themes before assuming that a conflict is the plugin and not the theme. It's impossible for me to intuit all the possible variations that can take place amongst themes and other plugins. Therefore, I designed this plugin to handle a wide range of classes specifically with gpEasy CMS in mind. By utilizing these classes you will most likely have no conflicts.
Also, the z-index for the styles has been set to 19999. If your theme displays the tool tip behind elements please adjust your z-index settings.