Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Navigation

jQuery tpTooltip plugin

— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

jQuery tpTooltip plugin - CodeCanyon Item for Sale


Ad: Bluehost hosting

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:
 <script> $(".tooltip").tptooltip({html:"I have a tooltip"}); </script> 

Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers


4 June 13

Last Update:
4 June 13

High Resolution:

Compatible Browsers:
IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, HTML, CSS, Layered PSD

Software Version:


eCommerce, eCommerce, All Items, ajax, image, jquery, psd, tooltip