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');
     div.style.position = 'absolute';

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

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

     // Set its Text to your desired text
     div.innerText = text;
   }
  </script>

Best Regards,

HC

Published 08 March 2007 08:19 AM by haissam

Comments

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

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

mehdi7033@yahoo.com

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

  div.style.display = 'block';

else

  div.style.display = 'none'

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

Shelly Thanks for sharing :)

This site

Search

Go

This Blog

Syndication

Sponsors

  • MaximumASP