iToolTip
These are some of the works that were put together in our own projects which I decided to release to you, the public. I hope you find it useful and would appreciate any feedback you may have. Please send all mail to me@iamgp.com.
Description
The plugin provides a simple tooltip that can contain html content. This makes it ideal for displaying any content.
This plugin requires jquery library.
Demo
Hover Over Me!Usage
Place the following code into the head of your html page. Obviously making sure that the path matches the location of the javascript file that you downloaded.
<script src="tooltips.js" type="text/javascript" charset="utf-8"></script>
The plugin works through a few simple naming conventions. This means that configuration and a difficult setup is not required. Although the plugin can be customized in the javascript code for advanced users.
An anchor is used to define the relationship between the target of the tooltip and the content that is in the tip. The anchor must contain the class .tooltip and a unique rel name. Your anchor will look something like this:
<a href="#" class="tooltip" rel="some_name">Hover over for a tooltip</a>
This rel will then be related to a div with an id of the same name. Here is an example of what the div might look like. The style (style="display: none;") is required to ensure that it is not visible when the page is loaded.
<div style="display: none;" id="some_name"> <strong>Some Name</strong> <br /> <p>Some content about Some Name.</p> </div>
Styling the Tooltip
This is really simple! All you have to do is style the element #tooltipx. Here is what my tooltip styling is:
#tooltipx{
position:absolute;
background:#333;
padding:5px;
display:none;
color:#fff;
max-width: 250px;
line-height: 125%;
}
And that's how simple it is.
Download
Get Tooltip plugin - Version 0.1
Credits
The plugin was initially written by Gareth Price using the jQuery library.
Help was provided by Gary Mardell.