JavaScript Tooltip
Tooltip In JavaScript....!
/* add as many elements as you want to support tooltip*/
Demo here..
Hello readers this code helps you to set tooltip in any element to show some text in a popup.
Although there is a feature supported by all the browsers to show tooltip by adding title attribute, but limitation is that you cannot use line breaks or background or foreground colors for title attribute. Below is the simple code to create tooltips using javascript. All you have to do is, just copy and paste the code and run. Code is Browser compatible.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tooltip In Javascript</title>
<script type="text/javascript" language="javascript">
function showhideTooltip(opt, ctrl)
{
var tooltip = document.createElement('div');
if (parseInt(opt) == 0)
{
var coord = getPositon(ctrl).split(' ');
var txtLen = ctrl.getAttribute('tooltip').length;
var siz = 10;
tooltip.setAttribute("id", "tooltip");
tooltip.style.position = 'absolute';
tooltip.style.zIndex = '100';
tooltip.style.display = 'block';
tooltip.style.fontFamily = 'verdana, arial';
tooltip.style.fontSize = '12px';
tooltip.style.letterSpacing = '1px';
tooltip.style.border = 'dotted 1px #999999';
tooltip.style.lineHeight = '1.6em';
tooltip.style.padding = '5px';
tooltip.style.background = '#383939';
tooltip.style.color = '#ffffff';
if (parseInt(txtLen) > 100)
{
tooltip.style.width = parseInt(txtLen) + parseInt(txtLen) + "px";
siz = 20;
}
tooltip.style.left = parseInt(ctrl.offsetWidth) + parseInt(coord[0]) + 20 + "px";
tooltip.style.top = parseInt(coord[1]) + 10 + "px";
tooltip.innerHTML = ctrl.getAttribute('tooltip');
document.body.appendChild(tooltip);
dwawChonch(coord, siz);
}
else
{
clearTooltip();
}
}
function getPositon(obj)
{
var topValue = 0;
var leftValue = 0;
while (obj)
{
leftValue += obj.offsetLeft;
topValue += obj.offsetTop;
obj = obj.offsetParent;
}
var finalValue = leftValue + " " + topValue;
return finalValue;
}
function clearTooltip()
{
var divId = document.getElementById("tooltip");
if (navigator.appName == "Microsoft Internet Explorer")
{
divId.removeNode(true);
}
else
{
divId.parentNode.removeChild(divId);
}
}
function assignAllElements()
{
var x = document.getElementById("form1");
if (x != null)
{
for (var i = 0; i < x.length; i++)
{
if (x.elements[i].getAttribute('tooltip'))
{
x.elements[i].setAttribute("onmouseover", "showhideTooltip(0, this)");
x.elements[i].setAttribute("onmouseout", "showhideTooltip(1, this)");
}
}
}
}
function assignAllTags()
{
var tags = new Array('div', 'span', 'p', 'a', 'b', 'h1', 'h2', 'h3', 'h4', 'h6');
for (var i = 0; i < tags.length; i++)
{
var getTag = document.getElementsByTagName(tags[i]);
for (var j = 0; j < getTag.length; j++)
{
if (getTag[j].getAttribute('tooltip'))
{
getTag[j].setAttribute("onmouseover", "showhideTooltip(0, this)");
getTag[j].setAttribute("onmouseout", "showhideTooltip(1, this)");
}
}
}
}
function dwawChonch(pos, size)
{
var chonch = document.createElement('div');
var tooldiv = document.getElementById('tooltip');
chonch.setAttribute("id", "chonch");
var lakeren;
for (var k = 0; k < parseInt(size); k++)
{
lakeren = document.createElement('div');
lakeren.setAttribute("id", "edg" + k);
lakeren.style.width = k + "px";
lakeren.style.height = k + "px";
lakeren.style.position = 'absolute';
lakeren.style.top = k + "px";
lakeren.style.left = k + "px";
lakeren.style.background = '#383939';
chonch.appendChild(lakeren);
}
chonch.style.position = 'absolute';
if (parseInt(size) > 10)
{
chonch.style.left = '-15px';
}
else
{
chonch.style.left = '-10px';
}
chonch.style.top = '0px';
chonch.style.zIndex = '-1';
tooldiv.appendChild(chonch);
}
window.onload = function ()
{
assignAllElements();
assignAllTags();
}
</script>
</head>
<body>
<form id="form1" id="form1">
<br />
<br />
<br />
/* add a custom attribute to element tag like as used below*/
<a href="#" tooltip="This is a tool tip using css and images">Tooltip</a><br />
<br />
<input type="text" tooltip="Enter Name Here" /><br />
<br />
<span tooltip="This is a tooltip inside span tag.This is a tooltip inside span tag.This is a tooltip inside span tag.">
Hover Me</span>
<br />
<br />
<br />
<span tooltip="This is a tooltip inside span tag.This is a tooltip inside span tag.This is a tooltip inside span tag.This is a tooltip inside span tag.This is a tooltip inside span tag.This is a tooltip inside span tag.This is a tooltip inside span tag.This is a tooltip inside span tag.This is a tooltip inside span tag.This is a tooltip inside span tag.This is a tooltip inside span tag.This is a tooltip inside span tag.">
Hover Me Big Span</span>
<p style="width: 200px;" tooltip="Tooltip on paraghraph. Code completely written in javascript.">
This is a paragraph having tool tip on hover.
</p>
</form>
</body>
</html>
Demo here..
Comments
Post a Comment