PolyTooltip v1.1 - an easy to use javascript tooltip script
Finished scripts, Javascript No Comments »This script generates tooltips, small information boxes on your website. It’s good looking and very simple to use.
Examples
Tooltip on a link:
Tooltip on an image:
Tooltip with HTML tags:
„Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
How to use
1. PolyTooltip uses the Prototype Framework and Scriptaculous Effects Library. You will need to include the following three Javascript files in the head of your HTML file (in this order).
| <script src="poly_tooltip/prototype.js" type="text/javascript"></script> <script src="poly_tooltip/scriptaculous.js" type="text/javascript"></script> <script src="poly_tooltip/tooltip.js" type="text/javascript"></script> |
2. The package includes some predefined styles (in the styles folder). Use one of them (or create a new one) by including the corresponding css file in the head of your HTML file.
| <link rel="stylesheet" type="text/css" href="poly_tooltip/styles/standard/tooltip.css" /> |
3. To activate PolyTooltip for a HTML element, just add a class=”poly_tooltip” to it, and write the tooltip text in the title attribute, e.g.
| <a href=”http://www.polymorph.at” class=”poly_tooltip” title=”This company rocks!”>Webdesign</a> |
or
| <img src=”http://www.polymorph.at/images/sidepic_cofe.jpg” class=”poly_tooltip” title=”mmmh… coffee” /> |
Recent Comments