Creating sweet tooltips

Posted by jcargoo | Tuesday, October 28, 2008
, | 0Delicious Twitter Reddit Digg Loading...

This is a simple example about how you can get cool Tooltips.
When you skim through any link in the page, a tooltip will be displayed showing the title of the link in the top and the link itself in the bottom.

Broadly speaking the operation is done as following

  • A check for DOM support is performed;
  • If found the title and href attributes of links are extracted from the page and they're injected into a DOM structure;
  • When the mouse is rolled over a link, the related tooltip (styled with CSS) is displayed.
Here are the requirements (Please find the code here)
  • JavaScript file containing all needed functions to do the stuff;
  • A CSS file for tooltip presentation;
  • A single image in gif format for the Tooltip;
  • Some lines to add on your HTML file in the head section of the page.
In the head element we will add the following code:
<script type="text/javascript" src="Tooltips.js"></script>
<script type="text/javascript">
Let's look now more closely at how tooltips works. We have an invisible markup which is added to the page with the help of the DOM when the mouse is over a link. The generated markup is:
<span class="tooltip">
<span class="top">TITLE of the link</span>
<b class="bottom">URL of the link [max 30 chars]</b>
The tooltip is positioned by JavaScript depending of the mouse position. The rest of the CSS styling this display is here:
width: 200px; color:#000;
font:lighter 10px/1.5 Arial,sans-serif;

.tooltip{padding: 30px 10px 0;
background: url(tooltip.gif) no-repeat top}

.tooltip b.bottom{font:bold;padding:3px 8px 15px;color: #668B8B;
background: url(tooltip.gif) no-repeat bottom}
Hope you enjoy!

How to encourage this blog if you like it:
  • Promote our sponsors;
  • Add any kind of comment or critic;
  • Ask me directly by email if you prefer.
Just do something like that, and I will have the huge pleasure to continue posting the best of the creativity I have.

Share this post ?

Digg Reddit Stumble Delicious Technorati Twitter Facebook

0 Previous Comments