gpEasy TipTip Plugin Documentation

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, bottom, 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:

  1. tipauto
    1. allows the JS to decide how the tool tip should be displayed--top, bottom, left, right, top left, etc.
  2. tiptop
    1. displays the tool tip above the item.
  3. tipbottom
    1. displays the tool tip below the item.
  4. tipleft
    1. displays the tool tip to the left of the item.
  5. tipright
    1. displays the tool tip to the right of the item.
  6.  tiplarge
    1. designed for larger tool tips. Display position is auto.
  7. tipcbox
    1. designed for Colorbox due to a conflict. This class will create a tool tip "Click to Enlarge" and allow Colorbox to still have captions. However, if the image has a title attribute that will also show.
  8. tipautoalive, tiptopalive, tipbottomalive, tipleftalive, and tiprightalive.
    1. these create an "alive" tool tip that will continue to display until it is hovered on and off. This allows you to add HTML to a title attribute and the user to be able to click links within the tool tip.
  9. MENUS
    1. Due to the side panel conflict I added specific classes that should wrap around any gpEasy auto-generated menus. Just add the following class to the div that wraps your menu.
      1. Menu Classes
        1. tipleftmenu
        2. tiprightmenu
        3. tiptopmenu
        4. tipbottommenu
        5. tipautomenu

Self Hiding Gadgets

You will notice that the gadget is visible when first added to a layout. The styling to hide the gadget is included in the style sheets; however, since the style sheet is added via JavaScript visitors with JS disabled will not get the tool tips and will see a message saying, "Please Enable JavaScript" where the gadget is added. Since v2.0 there is no text output for the gadget. Therefore it displays nothing and will not show up as long as the gadget is added to an area where the background color is the same--the gadget color is not defined. By default the area is display:none; except when on layout pages.

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:
License
/* 
* TipTip 
* Copyright 2010 Drew Wilson 
* www.drewwilson.com 
* code.drewwilson.com/entry/tiptip-jquery-plugin 
* 
* 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: 
* http://www.opensource.org/licenses/mit-license.php 
* http://www.gnu.org/licenses/gpl.html 
*/
 


Installation

See the plugins & gadgets tutorial page for instructions on how to install a gpEasy plugin.

Known Issues Specific To TipTip

  1. Conflicts with gpEasy's left side panel.
    1. The left side panel in gpEasy's admin will pop out 100% screen width when hovering over "Title Options" menu when a TipTip class has been applied to an auto-generated link in gpEasy. This only happens in certain instances. You can wrap the nav menu with one of the menu classes specified above without a problem; however, gadgets like the breadcrumb plugin needs the class added at the level of the link. I don't know why this is therefore, if you have this problem it's probably best not to add a class to that element and let the integrated vTip plugin style that particular link.
  2. Conflicts with Colorbox captions.
    1. Since the jQuery tipTip plugin uses the title attribute to display its tool tips and hides the normal title attribute this causes a conflict with Colorbox. I'm not able to find a resolution to this problem. It would be great if someone that knows JavaScript would like to help solve this problem. A similar problem occurs with lightbox and this page discusses a fix however I'm unable to make that fix work for this issue. This issue has been resolved by integrating the vTip plugin into the TipTip plugin. Do not apply a TipTip class to the galleries unless you don't want the captions in ColorBox.
  3. Arrow separates from tool tip.
    1. In certain cases when the browser is narrower than the page being viewed the tool tip might do some wonky things. One I've noticed is in the menu the arrow is in the appropriate position but the actual tool tip is outside of the div surrounding the menu.
  4. Links that break lines tool tip is in middle of page.
    1. If a link breaks to a second line in your page the tool tip will display in the middle of the page. This is caused by the tool tip's setting to be displayed in the middle of the link. If this is a problem for you just don't use the top & bottom tool tips, stick with the auto or left & right.
  5. Random tool tip positioning
    1. At times you will get a toll tip in a somewhat random position. Often this has to do with the type of element the tool tip is attached to, generally due to the width of that element.
  6. Internet Explorer
    1. IE does not support all the styling therefore it will look different. The vTip is loaded for IE7 and lower however, IE7 & 8 don't render all the stylings properly and therefore don't look the best, especially the white version.

Help

I know very little about JavaScript and therefore would appreciate anyone that knows more taking a look at this plugin to see if it can be made better, especially the Colorbox conflict.

Adding Styles

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.

Removing Gadgets.

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:

[Gadget:TipTip_Styles_Black]
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.

Why jQuery tipTip 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. 

Internet Explorer

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.

Report Bugs

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.

Download

 

gpEasy B2sq Theme by CS @True Acupuncture