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
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>
No comments:
Post a Comment