A Simple Tooltip with Images and Text

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

Mostly we go for available open source scripts which are free. I were 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 a simple Tooltip for you web pages with minimal code. Images , Text and HTML code can be shown inside the tooltip

Download the source code Here

24 Replies to “A Simple Tooltip with Images and Text”

  1. I need tool tip, which need to work dynamically in frames.
    it means a normal tool tips can work, in any window screens.
    but i need to work inside a frames.

    please find answer for me.

  2. Hi,
    Great work. Nice to look at. Will be a great feature to include in webpages.
    But unfortunately, it doesnt work in Opera.

  3. Hi,

    The tool-tip format is exactly what I require for my web-site. But the source code is not available any more. Can you please paste a link to the source codE?



  4. Yes, source code includes all. I thought the js and CSS files would be external.

    I dont know if we can ask question here but it will be great if you could answer this one.

    Basically I am using frames in my web-page. If I use tooltip for any element of my left frame (menu frame) it doesn’t appear properly because of the space allocated to the frame. I was just wondering if it possible to some how make the tooltip share the space of the main page ?



  5. First set a frame to 100%, then put a div in it, and set to height: 50%, top: 0px;
    Now put an iframe in it, set to height: 50%, top: 50%,
    And now turn off the frameborder and then use z-index on a absolutely positioned DIV to hover over the two frames.

    If you use any backgrounds, then set the background to transparent.
    This is a fix for IE.

    download the zip file from here and see the files

    Go the idea?

    You have to replace the div with the tootip div.
    That’s will work.


    Let me know any questions if u have

  6. Thanks. But the link for the zip files isn’t available. I am not realy good enough to figure it out with out looking at the files. :/ Will it be possible for you to paste the link again?



  7. thank for this great javascript,
    I have a problem with tooltip position in screen area, where link to tooltip is in botton screen position the tooltip is not visible.
    who do for view tooltip in position up link where is botton screen position?
    sorry, mi english is very bad.

  8. Hi,

    I have a photo.jpg showing a lot of people and want to add simple tooltips to display their names based on mouseover hover. So no links available, only positions. I don’t know about html, java, css. Do you have an example how to do this?


  9. Please could someone tell me,

    1. How to add different tooltips (image and text) to the same page using this code?

    2. Is it possible to make the tooltip stay where it is once the mouse has rolled over (as long as you keep your mouse inside the tooltip box) so that links can be added within?

    Thanks, I know its a lot to ask. An answer to the first question is more important than the second 🙂

Leave a Reply to Cisco academy Cancel reply

Your email address will not be published. Required fields are marked *