Home » eztip - jQuery plugin

pict-jquery.png This page explains the advanced usage of the eztip jQuery plugin.


We shows a bit more complex examples here, such as using Ajax to display the remote contents, showing the inline contents in the local HTML file, etc.

Please take a look at the actual examples first.

Displaying local inline data


Sample 4
  1. <a rel="#local4" title="Title4" class="tooltip">Sample 4 </a>
This example displays the local inline DIV block whose ID is "local4" to the tooptip. You can specify the local inlinde data using "rel=#(ID)" attribute. Below is the actual local inline DIV block.
  1. <div id="local4" style="display:none">This is the local inline DIV element (4)<br/>It is hidden using the display:none attribute.<br/><font color="red">This text is in Red</font></div>
The important thing is that you need to hide the local inline block using "display:none" attribute so that the inline block is displayed only to the tooltip. If you do not use the "display:none" attribute, the local inline block is also displayed on the page too.

Sample 5
  1. <a rel="#local5" title="Title5" class="tooltip">Sample 5 </a>
This example displays local inline DIV block whose ID is "local5". The difference between this and previous example is that this local inline block has image data using <img> tag instead of text data.

  1. <div id="local5" style="display:none; padding:0px;">
  2. <img src="/drupal/sites/default/files/images/pict-coffee.png" width="240" height="180" /></div>

Displaying external data using Ajax


Sample 6
  1. <a href="/test.html" title="Title6" class="tooltip" rel="/test.html">Sample 6</a>
To display an external HTML file, specify the URL of the external file using the "rel=" attribute. You should not use this for displaying a large page which requires scrolling to see the entire page since eztip displays the content in a tooptip while the mouse pointer is in the target selector. If you want to show a large page, use other JavaScript which displays a dialog.


Optional parameters


You can specify some optional parameters when you call eztip.

  • balloon
    Changes the tooltip stype to balloon type. The valid values are either true or false. (Default:false)
  • xoffset, yoffset
    Specifies the position where the tooltip is displayed using the relative pixel distance from the current mouse position. (Default: xoffset=10, yoffset=-10)
  • border
    Specified the thickness of the border of the tooltip. If 0 is specified, the border won't be drawn. This parameter is ignored in case of the balloon style tooptip.
  • width
    Specifies the fixed pixel width of the tooltip. As default, tooltip width is automatically changed based on the width of the contents. Use this parameter if you want to force the eztip always use the same tooltip width.
  • speed
    Specified the speed of the fade-in effect when the tooltip is displayed. You can use numeric value (ms), or "slow" or "fast". (Default: "fast").

    Please see the fadeIn Effect page at the jQuery.com. (Due to the IE's bug of displaying transparent PNG, this setting is ignored in case of the balloon style tooltip).

For example, if you want to change the border width to 1px and fade-in speed to "slow", use the code below:
  1. $("a.tooltip").eztip({ border: 1, speed: 'slow'});

Customizing the look


In order to customize the look (text color, background color, border style, etc), modify the stylesheet file jquery.eztip.css.
Title is defined by the "#tooltip #tooltip-title", contents is defined by the "#tooptip #tooltip-contents", and the entire tooptip which includes both title and contents is defined by the "#tooltip" DIV element.

  1. #tooltip {
  2.         position:absolute;
  3.         z-index: 2000;  /* bring up to front */
  4.         display: none;
  5. }
  6. #tooltip #title {
  7.         background: #000;
  8.         color: #fff;
  9.         padding: 4px 8px 3px 8px;
  10.         text-align: center;
  11.         font-size: 11px;
  12.         border: solid 3px #444;
  13.         opacity: 0.9;
  14.         -moz-opacity: 0.9;
  15.         filter: alpha(opacity = 90);
  16. }
  17. #tooltip #tooltip-contents {
  18.         background: #fff;
  19.         border: solid 3px #444;
  20.         padding: 6px 8px 6px 8px;
  21.         text-align: left;
  22.         line-height: 1.4em;
  23.         opacity: 0.9;
  24.         -moz-opacity: 0.9;
  25.         filter: alpha(opacity = 90);
  26.         zoom: 1;
  27. }

If you want to change the style of the balloon type, please change the #balloon, #balloon-title, #balloon-contents section of the style sheet.

No votes yet