Overview
To use skinny tip, you must do three things:
- Include skinnytip.js in the head section of your web page
- Include a special html div tag in the body of your page
- Attach the tooltip by setting onmouseover and onmouseout
properties of the link, button, or graphic.
Include skinnytip.js Details
To include the skinnytip.js file in your web page, you need
to insert the following code into the head
section of your html code.
Javascript include call:
<script type="text/javascript" src="skinnytip.js">
<!-- SkinnyTip (c) Elliott Brueggeman -->
</script>
HTML editor screen capture:
Include Div Tag Details
Next, you have to include this div tag in the body of your
Div tag:
<div id="tiplayer" style="position:absolute;
visibility:hidden; z-index:10000;"></div>
HTML editor screen capture:
Attaching the Tooltip Lastly include
the onmouseover and onmouseout properties in the tag of the
link, button, or graphic that you want to attach the tooltip
to in your html.
Tooltip attached to image:
<img src="lightbulb.png" onMouseOver="return
tooltip('Tooltip text.', 'Tooltip Title' ,'width:200');" onMouseOut="return
hideTip();">
The two functions called are the tooltip() function and the
hideTip() function. The tooltip function takes three arguments.
- The first argument (required) is the tool tip text.
- The second (optional) is the tooltip title.
- The last argument is the tooltip configuration paramaters
separated by commas.
The hideTip() function should be called on the onMouseOut property
to close the tooltip. Note the "return" before the
calls to the functions. This is important!
Example Tooltip Function Calls
Example 1: Basic tooltip using
SkinnyLib defaults for color and layout. View
tooltip.
<a href="#" onmouseover="return
tooltip('Useful tip!');" onmouseout="return hideTip();"
onClick="return false;">View tooltip</a>
<a href="#" onMouseOver="return
tooltip('Yet another tool tip.', 'Tooltip Title', 'width:200,
border:5, fontsize:16, titlefontsize:16, bordercolor:#FF0000,
textcolor:#FF0000');" onmouseout="return hideTip();"
onClick="return false;">View
tooltip</a>
<a href="#" onMouseOver =
"return tooltip('Tooltip Text!', 'Tooltip Title', 'width:150,
titletextcolor:#FFFFFF, bordercolor:#333333, backcolor:#EEEEEE');"
onmouseout="return hideTip();" onClick="return
false;">View tooltip</a>
Example 4: Tooltip attached
to an image. 
<img src="http://www.ebrueggeman.com/images/icon_lightbulb.png"
alt="Tooltip" width="16" height="16"
onMouseOver="return tooltip('Yet another tool tip.',
'Image Tooltip', 'width:200,border:5,cellpad:5,textsize:3,titletextsize:3,textcolor:#FF0000');"
onMouseOut="return hideTip();" onClick="return
false;"/>
For details on all the variables that you can use to configure
your SkinnyTip Tooltip, see the Configuration
Variable Reference (below.)
More on Attaching Tooltips to Links
In the above examples you'll notice that the links are "dummy
links," as they don't actually go anywhere. The link is
used to get the user's attention so they will put their mouse
over the link and see the tooltip, but the link won't go anywhere
when clicked. To make a dummy link, put # as the link destination
and add the property onClick="return false;" to the
tag. |
