jQuery tpTooltip plugin

jQuery tpTooltip plugin Created by tpaksu. This templates have specific characteristics, namely: 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. .

You can use this jQuery tpTooltip plugin on Javascript category for ajax, image, jquery, psd, tooltip and another uses.

jQuery tpTooltip plugin
© Copyright by tpaksu

Main Features:

  • Video preview resolution: 854×480
  • Software version: jQuery
  • High resolution: Yes
  • Compatible browsers: IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome
  • Files included: JavaScript JS, HTML, CSS, Layered PSD

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 ownfadeintime: 200,    // timeout for tooltip fade infadeouttime: 200,    // timeout for tooltip fade outshowdelay: 200,        // tooltip show time (milliseconds)hidedelay: 200,        // tooltip hide delay (milliseconds)offsetx: 0,        // tooltip horizontal offsetoffsety: 0,        // tooltip vertical offsetajax: null,        // URL to get content fromhtml: null,        // content HTMLobjID: null,        // content wrapper object IDimage: null,        // image pathelementStyle: '',    // style parameters applied to tooltip handlerelementClass: null,    // class name applied to tooltip handleronclick:false,        // use click event instead of mouse entertooltipOffset : 10,    // tooltip show animation offsetanimateTooltip : true,  // animated display or direct display selectoralwaysvisible: 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:

<script>$('.tooltip').tptooltip({html:'I have a tooltip'});</script>