Click here to Skip to main content
11,633,998 members (75,463 online)
Click here to Skip to main content

A Simple Tooltip With Images And Text

, 16 Sep 2007 CPL 136.2K 2.9K 36
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

Introduction

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.

Background

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).

<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 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="http://upload.wikimedia.org/wikipedia/meta/2/2a/
        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>'
    toolTip(s)
}

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

Note

  1. We can set the font styles and opacity of the tooltip using the CSS class
    .toolTip 
    <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>
  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.

License

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

Share

About the Author

No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionZ-index Pin
Tim Ramich9-Oct-12 10:01
memberTim Ramich9-Oct-12 10:01 
Questionlocation of tooltip changes Pin
Member 37514835-Apr-11 0:33
memberMember 37514835-Apr-11 0:33 
AnswerRe: location of tooltip changes Pin
Scott Wolfington7-Jan-12 7:57
memberScott Wolfington7-Jan-12 7:57 
GeneralRe: location of tooltip changes Pin
Scott Wolfington7-Jan-12 8:03
memberScott Wolfington7-Jan-12 8:03 
GeneralRe: location of tooltip changes Pin
Scott Wolfington7-Jan-12 8:13
memberScott Wolfington7-Jan-12 8:13 
QuestionHow to assign Tooltip Text at run-time? Pin
adamnguyen1-Apr-10 11:02
memberadamnguyen1-Apr-10 11:02 
NewsThanks Pin
sherazkhan11519-Nov-09 23:15
membersherazkhan11519-Nov-09 23:15 
your code help me a lot so
i am very thankful to you
QuestionHow i can use this Code in Server Side ...... Pin
ketan d patel11-Jun-09 19:55
memberketan d patel11-Jun-09 19:55 
Questioncan I insert an image within a rounded cornered box? - and soem formatted text ? Pin
John Donahue5-Oct-07 10:52
memberJohn Donahue5-Oct-07 10:52 
AnswerRe: can I insert an image within a rounded cornered box? - and soem formatted text ? Pin
Kumar Sundaram7-Oct-07 15:16
memberKumar Sundaram7-Oct-07 15:16 
GeneralThanks Pin
ManishTech28-Sep-07 19:35
memberManishTech28-Sep-07 19:35 
GeneralThe way i used your code Pin
ManishTech26-Sep-07 20:27
memberManishTech26-Sep-07 20:27 
GeneralRe: The way i used your code Pin
Kumar Sundaram27-Sep-07 15:28
memberKumar Sundaram27-Sep-07 15:28 
GeneralRe: The way i used your code Pin
Surjit Singh Dadhwal4-Sep-08 13:01
memberSurjit Singh Dadhwal4-Sep-08 13:01 
GeneralWorking Now Pin
Kumar Sundaram27-Sep-07 15:36
memberKumar Sundaram27-Sep-07 15:36 
QuestionScript Error When MouseOver Occurs Before Page Fully Loads Pin
Dianal26-Sep-07 9:40
memberDianal26-Sep-07 9:40 
AnswerRe: Script Error When MouseOver Occurs Before Page Fully Loads Pin
Kumar Sundaram26-Sep-07 15:15
memberKumar Sundaram26-Sep-07 15:15 
GeneralRe: Script Error When MouseOver Occurs Before Page Fully Loads Pin
Dianal10-Oct-07 9:12
memberDianal10-Oct-07 9:12 
QuestionProblem is not solved Pin
ManishTech24-Sep-07 19:45
memberManishTech24-Sep-07 19:45 
AnswerRe: Problem is not solved Pin
Kumar Sundaram26-Sep-07 15:21
memberKumar Sundaram26-Sep-07 15:21 
QuestionI am Unable to implement the code Please Help Pin
ManishTech21-Sep-07 20:14
memberManishTech21-Sep-07 20:14 
AnswerRe: I am Unable to implement the code Please Help Pin
Kumar Sundaram21-Sep-07 22:23
memberKumar Sundaram21-Sep-07 22:23 
GeneralCursor-Hand addition Pin
kdamalie17-Sep-07 12:16
memberkdamalie17-Sep-07 12:16 
GeneralRe: Cursor-Hand addition Pin
Kumar Sundaram18-Sep-07 16:21
memberKumar Sundaram18-Sep-07 16:21 

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

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

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