Click here to Skip to main content
13,409,451 members (39,923 online)
Click here to Skip to main content
Add your own
alternative version


37 bookmarked
Posted 16 Sep 2007

A Simple Tooltip With Images And Text

, 16 Sep 2007
Rate this:
Please Sign up or sign in to vote.
A Simple Tooltip with Images and Text using JavaScript, DHTML
Screenshot - With image and Text.jpg


As web programmers, we need to show tooltips often in our pages, but not in an old fashioned way. Tooltips should be appealing and subtle to the page layout and design.

Most of the time, 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 realized that customizing a free snippet took more time.


A little bit of JavaScript, HTML and CSS experience will help you in modifying the script to suit your needs.

Using the code

Writing a tooltip is quite simple. This is a simple tooltip for our 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 that we are going to use for our 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, 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 following 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. The first parameter is mandatory, in which we are going to pass the text to be shown for the tooltip.

The second and third parameters are optional. They are the foreground color and background color respectively. 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, we can first form an HTML string and then pass it to the tooltip function. That's all.

The tooltip will have the formatted text and image. There is nothing special to code for this. The div tag does everything that we need to show (images, HTML string etc).


    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 an HTML string and maintain readability. Inside show(), we can format the string, add text, image etc. needed for the tooltip. You can use your own function or use inline code in the onmouseover = "".

function show()
    s = '<table width="100%" cellspacing="2" cellpadding="0" border="0">';
    s += '<tr><td><img src="
        Nohat-logo-nowords-bgwhite-200px.jpg" border="0"/> </td>
        <td valign="top">WikiPedia</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>'

Now everything is ready. We are going to look into 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 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.

Screenshot With Colors Set

Screenshot Text only


  1. We can set the font styles and opacity of the tooltip using the CSS class
    <span class="code-none">{
        font-family<span class="code-none">: Verdana, Arial, Sans-serif, 'Times New Roman'<span class="code-none">;
        font-size<span class="code-none">: 8pt<span class="code-none">;        
        filter<span class="code-none">:alpha(opacity=80)<span class="code-none">;
        -moz-opacity<span class="code-none">: 0.8<span class="code-none">;
        opacity<span class="code-none">: 0.8<span class="code-none">;
        /* comment the above 3 lines if you don't want transparency*/
    <span class="code-none">} </span></span></span></span></span></span></span></span></span></span></span></span>
  2. We can insert HTML with tables for better formatted output/look for the tooltip. But don't include HTML, body tags.
  3. We can add this tooltip for any HTML element. In this example I've used the span tag.


This article, along with any associated source code and files, is licensed under The Common Public License Version 1.0 (CPL)


About the Author

No Biography provided

You may also be interested in...

Comments and Discussions

Questionlocation of tooltip changes Pin
Member 37514835-Apr-11 1:33
memberMember 37514835-Apr-11 1:33 
AnswerRe: location of tooltip changes Pin
Scott Wolfington7-Jan-12 8:57
memberScott Wolfington7-Jan-12 8:57 
GeneralRe: location of tooltip changes Pin
Scott Wolfington7-Jan-12 9:03
memberScott Wolfington7-Jan-12 9:03 
GeneralRe: location of tooltip changes Pin
Scott Wolfington7-Jan-12 9:13
memberScott Wolfington7-Jan-12 9:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180221.1 | Last Updated 17 Sep 2007
Article Copyright 2007 by Kumar Sundaram
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid