jQuery tpTooltip plugin

jQuery tpTooltip plugin

jQuery tpTooltip plugin is a plugin that allows you create tooltips on any element that you want in your web page/application. Include just one javascript and css file in your html, create your own skin with the PSD file included (slices are ready to publish the skin directly), and you’re all set.

Main Features

  • Highly customizable (look at the properties below),
  • Skinning supported with a single PSD file,
  • included 4 default skins (black,red,green,blue),
  • static data or dynamic AJAX data loading supported
The properties of this plugin that you can modify for your needs are:

position: "top",    // "top", "left", "bottom", "right" 
arrow: "left",        // "top", "middle", "bottom", "left", "center", "right" 
skin: "flat",        // currently flat,red,blue and black, you can add your own
fadeintime: 200,    // timeout for tooltip fade in
fadeouttime: 200,    // timeout for tooltip fade out
showdelay: 200,        // tooltip show time (milliseconds)
hidedelay: 200,        // tooltip hide delay (milliseconds)
offsetx: 0,        // tooltip horizontal offset
offsety: 0,        // tooltip vertical offset
ajax: null,        // URL to get content from
html: null,        // content HTML
objID: null,        // content wrapper object ID
image: null,        // image path
elementStyle: "",    // style parameters applied to tooltip handler
elementClass: null,    // class name applied to tooltip handler
onclick:false,        // use click event instead of mouse enter
tooltipOffset : 10,    // tooltip show animation offset
animateTooltip : true,  // animated display or direct display selector
alwaysvisible: false    // tells if tooltip should be always visible

How to install

Append these lines between your html file’s ”<head></head>” tags:
<script src="lib/jquery.tptooltip.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles/jquery.tptooltip.css"></link>
and then this code will add tooltip to your ”.tooltip” classed elements:
$(".tooltip").tptooltip({html:"I have a tooltip"});