Create Tooltip using Div Layer

Throughout my contributions in forums, i noticed that a lot of developers are asking how to create a customized tooltip when a user clicks or mouse hover a specific control. Please find below an implementation.

First, Add the below Markup code inside your html page

<div id="Tooltip" style='DISPLAY:none;WIDTH:200px;HEIGHT:150px' runat='server'></div>
<input type="button" onclick="ShowDiv(event,'this is a text')"  value="Testing" style='Z-INDEX: 112; LEFT: 488px; POSITION: absolute; TOP: 560px'>

 Above we created a div layer (hidden by default) and a button once clicked the div layer will be shown below this button dynamically. Notice the onclick event is calling a javascript function and sending the message to be displayed inside the customized tooltip.

Javascript Code

Below is a function which will calculate the mouse position when the user click on the button, and we will set the Top and Left properties for the div layer to those coordinates in order to show it under the button, this javascript function takes the click event and the text to be displayed inside the div as parameters

Paste your below code inside the <head> tag

<script language="javascript">
   function ShowDiv(e,text)
     // Get the click location
     var height = e.clientY + parseInt('5');
     // Get the height inside the clicked image
     var offsetHeight = parseInt(e.offsetY);
     height = height - offsetHeight;
     // Get the click location(width)
     var width = e.clientX
     // Get the width inside the clicked image
     var offsetWidth = parseInt(e.offsetX);
     width = width - offsetWidth;
     var div = document.getElementById('Tooltip'); = 'absolute';

     // Set the div top to the height = parseInt(height) + parseInt('20');

     // Set the div Left to the height = parseInt(width) + parseInt('20');
     // Show the div layer = 'block';

     // Set its Text to your desired text
     div.innerText = text;

Best Regards,


Published 08 March 2007 08:19 AM by haissam


# mehdi said on 18 March, 2007 01:31 PM

i am mehdi , from iran please send to me sample and javascript

# Shelly said on 14 November, 2007 04:09 PM

I added a global variable in the javascript code to toggle the display of the div:

var showToolTip = false;

In the function add the following code:

// Show/Hide the div layer

if (showToolTip) = 'block';

else = 'none'

# haissam said on 19 November, 2007 05:08 PM

Shelly Thanks for sharing :)

This site



This Blog



  • MaximumASP