Home » eztip - jQuery plugin

pict-jquery.png This is the user guide of the eztip jQuery plugin eztip. We explain it using some examples.


Preparation


First off, download the archive of the eztip plugin from the bottom of the previous page. Then place it somewhere in your web server and unzip it.

Installation


All you really need to install is the fillowing files in the zipped archvie.
  • jquery.eztip.js Javascript program
  • stylesheets/jquery.eztip.css CSS file
  • images/balloon*.png (total 6 files)
    Images to be used for the balloon style

If you do not need to use the ballon style option, you do not need to install the image files and images sub-directory. Then copy them to somewhere in your server. It would be better to place them to the directory where you have other Javascript files.

If you do not install images sub-directory to the same directory as the jquery.eztip.js, then you need to edit the CSS file jquery.eztip.css since the style sheet defined the location of images directory using relative path "../images/balloonXXXX.png". Please change this relative path so that it points to the image files correctly.


Embedding Javascript


In order to use the eztip plugin, you needs to embded Javascript and CSS files to the header section of the HTML files which want to use eztip plugin.
  1. <script type="text/javascript" src="(path)/jquery.eztip.js"></script>
  2. <style type="text/css" media="all">@import "(path)/jquery.eztip.css";</style>

Specifies the target HTML


In these examples, we use the "tooltip" class. You can use any selector as long as they are supported as jQuery selector. You can use an ID instead of a class, or you can even use a specific HTML tag as a target selector.

Sample 1  (Title+Data)
  1. <a title="Title1|This is the data in the title (1)" class="tooltip">Sample 1</a> (Title+Data)
As you can see in this example, both title and contents are specified using the title attribute. Title portion comes first and then a separator "|" comes next, followed by the contents. eztip recognize and use the text before the separator as a title and the text after the separator as the contents.

Sample 2  (Title only)
  1. <a class="tooltip" title="Title2">Sample 2</a> (Title only)
If you only need a title, you do not need to add the separator "|".

Sample 3  (Data only)
  1. <a class="tooltip" title="|This is the data in the title (3)">Sample 3</a> (Data only)
In case if you do not need a title, start the title attribute with "|" followed by the contents.

eztip can be used with other HTML tags.

Sample 8 (p element: Title+Data))
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla turpis, malesuada vitae, congue iaculis, congue et, metus. Donec commodo lectus eu metus.

  1. <p title="Title8|This is the data in the title (8)" class="tooltip">Sample 8 (p element:Title+Data)<br/>
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla turpis, malesuada vitae, congue iaculis, congue et, metus. Donec commodo lectus eu metus. </p>

Sample 9 (span element: Title+Data)
  1. <span title="Title9|This is the data in the title (9)" class="tooltip">Sample 9 (span element: Title+Data)</span>

Sample 10 (div element: Title only)
  1. <div title="Title10" class="tooltip">Sample 10 (div element: Title only)</div>

Calling eztip


The final step is to call the eztip plugin. Like other jQuery plugins, you need to add a call to eztip at the ready function in the header section.
  1. <script type="text/language">
  2. $(function() {
  3.   $("a.tooltip").eztip();
  4. });
  5. </script>
That's all. In this example, we are using the anchor tag with the "tooltip" class as a target selector.

If you want to use the balloon style, pass the parameter to eztip as follows:
  1. <script type="text/language">
  2. $(function() {
  3.   $("a.tooltip").eztip({baloon:true});
  4. });
  5. </script>


No votes yet