Introduction
Use this script to view tooltips on mouse-over. Have a look at these examples:
Example #1
Example #2
Example #3
Example #4
This script was tested with the following operating systems and browsers:
Windows: Internet Explorer, Opera, Firefox, Chrome
If you use another browser or operating system, this script may not work for you - sorry.
Usage
Insert this line into your HTML page:
<script type="text/javascript" src="tooltip.js"></script>
Use the toolTip function with mouse-over and mouse-out events:
- To show a tooltip, use this syntax: toolTip(text, size, opacity, padding, border)
- text: HTML content
- size: width in pixels or "width:height", example: "270:100"
- opacity: 1 - 100
- padding: pixels
- border: CSS rule, example: "1px solid red"
Note: all arguments except for text are optional. Opacity is not supported by all browsers.
- To hide a tooltip, use this syntax: toolTip()
Examples
<a href="#" onMouseOver="toolTip('Just a test', 150)" onMouseOut="toolTip()">some text here</a>
<span onMouseOver="toolTip('Another test', '320:110', 100)" onMouseOut="toolTip()">my text</span>