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