A small tool tip with images and text

As a web programmer we need to show tooltip often in our pages but not in an old fashioned way. Something appealing and subtle to the page layout and design.

Mostly we go for available open source scripts which are free. I was also doing the same until I decided to write a simple one when I were in need of customizing a free snippet, which took more time.

Writing a tool tip is quite simple. This is a simple Tooltip for you web pages with minimal code. Images, Text and HTML code can be shown inside the tooltip.

First we have to define a div which is our tooltip which we are going to use for out tooltip. Using a div will help us to show images, html code etc inside a tooltip. We can define the styles of the tooltip like transparency, font etc.

Once the tooltip div is ok, next we have to add some attributes/events to the elements for which we are going to use this tooltip.

For example:

I want to show a tooltip with text only for a span. Then I've to add the below to the span.

1. onmouseover
2. onmouseout

These two events are used to show the tooltips while the mouse is over the span and hide the tooltip when the mouse is out of the span.

<span onMouseOver="toolTip('simple Tooltip Text here')" onMouseOut="toolTip()" class="Text">Simple Tooltip</span>

For tooltip function there are three parameters to be passed. First parameter is mandatory, in which we are going to pass the text to be shown for the tooltip. The second and third are the foreground color and background colors, and are optional. If these two parameters are omitted then the default colors will be used.

To show an image inside or show some formatted message with html markup what we can do is, we can first form a HTML string then we have to pass to the tooltip function. That's all. The tooltip will be having the formatted text and image. There is nothing special to code for this. The div tag does everything what we need to show (images, html string etc). 

<span onMouseOver="show()" onMouseOut="toolTip()" class="Text">Tooltip with Images and Text</span>

For formatting I'm using a separate function show() to avoid confusion while using html string and maintain readablility. Inside show() we can format the string, add text, image etc needed for the tooltip.

function show()

{

s = '<table width="100%" cellspacing="2" cellpadding="0" border="0">';

s += '<tr>

<td>

<img src= "http://www.dotnetheaven.com/App_Themes/CSharp/Images/DNHSiteLogo.gif" border="0"/>

</td>

<td valign="top">DotNet Heaven</td>

</tr>';

s += '<tr>

   <td colspan="2" class="Text">

      <hr/>this is a test for simple tooltip. <br/>

      You can add text and images to the tooltip

   </td>

</tr>';

s += '</table>'

toolTip(s)

}

Now everything is ready. We are going to look in to, how the tooltip is being shown in the mouse position.

Whenever the mouse is moved inside the document, we are detecting the event using

document.onmousemove = moveToMousePos;

This will place the tooltip in the mouse's current position. The "moveToMousePos" function will detect the mouse coordinates and set the tooltip div's left and top positions. So the when the mouse is over the span we want to show the tooltip, then the tooltip's display property will be set to block and when out, display property is set to none.

A simple tooltip with text only.

Figure 1:

A tooltip with colors set

Figure 2:

Tooltip with images and text

Figure 3:

Note:

We can set the font styles and opacity of the tooltip using the css class

.toolTip

{

    font-family: Verdana, Arial, Sans-serif, 'Times New Roman';

    font-size: 8pt;       

    filter:alpha(opacity=80);

    -moz-opacity: 0.8;

    opacity: 0.8;

    /* comment the above 3 line if you don't want transparency*/

}

We can insert html with tables for better-formatted output/look for the tooltip. But don't include html, body tags.