Click here to Skip to main content
Click here to Skip to main content

A Simple Tooltip With Images And Text

, 16 Sep 2007 CPL
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></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.

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

Comments and Discussions

 
QuestionZ-index PinmemberTim Ramich9-Oct-12 11:01 
Questionlocation of tooltip changes PinmemberMember 37514835-Apr-11 1:33 
AnswerRe: location of tooltip changes PinmemberScott Wolfington7-Jan-12 8:57 
GeneralRe: location of tooltip changes PinmemberScott Wolfington7-Jan-12 9:03 
GeneralRe: location of tooltip changes PinmemberScott Wolfington7-Jan-12 9:13 
QuestionHow to assign Tooltip Text at run-time? Pinmemberadamnguyen1-Apr-10 12:02 
This is great Tooltip Script !
 
I'm using ASP.NET 3.5 and C#.
Please instruct me how to assign Tooltip TEXT at runtime ?
The Tooltip TEXT I will get is from Database Table (for example).
 
I would appreciate it, if you will send me sort code in C# example of assigning Tooltip TEXT at runtime.
 
Please send to my current email address:
 
adam.d.nguyen@verizon.com
 
Thank you;
Adam
NewsThanks Pinmembersherazkhan11520-Nov-09 0:15 
QuestionHow i can use this Code in Server Side ...... Pinmemberketan d patel11-Jun-09 20:55 
Questioncan I insert an image within a rounded cornered box? - and soem formatted text ? PinmemberJohn Donahue5-Oct-07 11:52 
AnswerRe: can I insert an image within a rounded cornered box? - and soem formatted text ? PinmemberKumar Sundaram7-Oct-07 16:16 
GeneralThanks PinmemberManishTech28-Sep-07 20:35 
GeneralThe way i used your code PinmemberManishTech26-Sep-07 21:27 
GeneralRe: The way i used your code PinmemberKumar Sundaram27-Sep-07 16:28 
GeneralRe: The way i used your code PinmemberSurjit Singh Dadhwal4-Sep-08 14:01 
GeneralWorking Now PinmemberKumar Sundaram27-Sep-07 16:36 
QuestionScript Error When MouseOver Occurs Before Page Fully Loads PinmemberDianal26-Sep-07 10:40 
AnswerRe: Script Error When MouseOver Occurs Before Page Fully Loads PinmemberKumar Sundaram26-Sep-07 16:15 
GeneralRe: Script Error When MouseOver Occurs Before Page Fully Loads PinmemberDianal10-Oct-07 10:12 
QuestionProblem is not solved PinmemberManishTech24-Sep-07 20:45 
AnswerRe: Problem is not solved PinmemberKumar Sundaram26-Sep-07 16:21 
QuestionI am Unable to implement the code Please Help PinmemberManishTech21-Sep-07 21:14 
AnswerRe: I am Unable to implement the code Please Help PinmemberKumar Sundaram21-Sep-07 23:23 
GeneralCursor-Hand addition Pinmemberkdamalie17-Sep-07 13:16 
GeneralRe: Cursor-Hand addition PinmemberKumar Sundaram18-Sep-07 17: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
Web03 | 2.8.141216.1 | Last Updated 17 Sep 2007
Article Copyright 2007 by Kumar Sundaram
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid