Quick and Easy Tooltip

• Download tooltip - 33.1 KB

Introduction

This tip will show you how to add a tooltip to your website with only a little bit of JavaScript, Jquery, HTML, and CSS. It's very easy to implement and works pretty well across the browsers I've tested which are Internet Explorer (no hacking necessary), Firefox, and Chrome.

Background

I was looking for an easy way to add a tooltip to my website, and couldn't find anything that was quite what I was looking for. I did not want to have to download a separate .js file to my directory, and did not want to have to go digging through a bunch of code to figure out what I needed, because I just wanted something that would show a small box with text in it, when I hovered over an element. So I did a little research, and made my own. CodeProject has been good to me over the years with my coding projects, so I figured I would contribute something myself. I hope you find it useful.

Using the Code

This will, for the most part, be a copy and paste job. Just make sure you are using the jquery library in your site. If you don't know how to, check out these instructions.

As an overview, this is what's going to happen. We are going to have a div on the page that will be used to show your tooltip. It's going to sit on the page anywhere, it does not really matter because it's only going to be shown when it's needed and has a coordinate location to be placed.

The HTML

There is only one line of HTML required to make this work. We are just adding our tooltip container to the page. There is nothing special about this. It's just a plain ole' div. This is going to pop around the screen as you need it instead of being created and destroyed dynamically.

<div id="divToolTip" style="background-color:#FFFFE1; border:1px solid black; 
border-radius:3px; color:Black; font-family:Tahoma; font-size:12px; padding:2px 2px 2px 2px; 
max-width:150px; display:none;"></div>  

The JavaScript/Jquery

There are really only two functions to this whole script. Showing the Tooltip, and hiding it, which I will explain both.

Showing the Tooltip

function ShowToolTip(e, strText) {
    if (strText != "") {
        $("#divToolTip").show();
        var x = e.pageX;
        var y = e.pageY;
        var div = document.getElementById("divToolTip");
        div.innerHTML = strText;
        div.style.left = (x - $('#divToolTip').width() - 6) + "px";
        div.style.top = (y - $('#divToolTip').height() - 6) + "px";
    }
}

So here, we are using some jquery to show the tooltip div, and then get the position of the mouse relative to the page, and where the element you are hovering over is. We offset the tool tip so that it is not getting in the way of the mouse by subtracting the tooltip's height and width from the x,y coordinates of the mouse.

Hiding the Tooltip

function HideToolTip() {
           $("#divToolTip").hide();
       }

Ummm. Not much to say about this one. It hides the tooltip when you don't have your mouse over the element anymore. 'Nuff said. Let's move on.

Using the Tooltip (The Other HTML)

Ok, I lied. There is a little more HTML involved. In my defense though, this isn't part of the preparations, this is how to actually use the tooltip and make it show up (and hide it).

<a onmousemove="ShowToolTip(event, 'Text To Show in Tool Tip');" onmouseout="HideToolTip();"></a>   

That's it. Just call the ShowToolTip function in the onmousemove event, and call the HideToolTip function in the onmouseout function. In the ShowToolTip function, event will pass the event args to the JavaScript so that you can get the x,y coordinates. The rest is just what you want to show.

**Please Note**

Two things:

1. If you are using this on an element that is absolutely positioned, you will need to set the z-index of tooltip div to something higher than whatever you are adding a tooltip to. Otherwise, the tooltip will end up being behind the element you are hovering over.
2. The tooltip will always show up to the upper left of the mouse. If you want it to show up somewhere else, just adjust it in the JavaScript. Specifically here:

div.style.left = (x - $('#divToolTip').width() - 6) + "px";
div.style.top = (y - $('#divToolTip').height() - 6) + "px"; 

I have uploaded an HTML file to this project so you can see a demonstration of it. Hope this helps someone.

Thanks.

History

• 4^th October, 2013: Initial version