Friday, December 5, 2008

JavaScript ToolTip

Today i will discuss tooltip in javascript how can you create it and use it very quickly in your code. I have seen that there is no such control for tooltip in asp.net, so the developer try to design there own tooltip. Some of the control in the asp.net has the property tooltip but not all has. So in order to show the tooltop for those control here is the little javascript code to use it. This Sample Javascript code is taken from the Itookia, and I have modified the code according to my need and also the i have use the stylesheet for the formatting.


and the tooltip which contain the help information .

and tooltip which contain the image.

The Css used for this tooltip which i have changed is takend from Itookia

.newDivClass

{

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,

StartColorStr=#ffffff, EndColorStr=#cecfde);

cursor: hand;

width: 300px;

font-size: 11px;

padding-left: 5px;

padding-right: 5px;

border: 1px solid #7b9ebd;

position: absolute;

visibility: hidden;

}



.TitleClass

{

padding: 6px 0 4px 10px;

font: bold 12px Trebuchet MS ,Arial;

float: left;

clear: both;

width: 100%;

}



.mainParagraphClass

{

font: normal 12px Trebuchet MS, Arial;

padding: 0 2px 6px 20px;

margin: 0;

float: left;

}


.MainImageClass

{

font: bold 12px Trebuchet MS ,Arial;

margin-right: 10px;

border: #BDBDBD 1px solid;

float: left;

}



The javascript code which i have modified is

var lastTooltip =null;

showTooltip = function (strTitle,strText,strHelpText,strhelpImage,strmainImage)

{

if (lastTooltip==null)

{

var newDiv = document.createElement("div");

newDiv.className='newDivClass';

var title = document.createElement("span");

title.className='TitleClass';

var titleText = document.createTextNode(strTitle);

title.appendChild(titleText);

var mainParagraph = document.createElement("p");

mainParagraph.className='mainParagraphClass';

if (strmainImage)

{

var mainImg = document.createElement("img");

mainImg.setAttribute("src",strmainImage);

mainImg.className='MainImageClass';

mainParagraph.appendChild(mainImg); }

var mainText = document.createTextNode(strText);

mainParagraph.appendChild(mainText);

newDiv.appendChild(title);

newDiv.appendChild(mainParagraph);

if (strHelpText)

{

var horLine = document.createElement("hr");

horLine.style.width='96%';

horLine.style.clear='both';

var helpDiv = document.createElement("div");

helpDiv.style.styleFloat='left';

helpDiv.style.cssFloat='left';

helpDiv.style.clear='both';

helpDiv.style.paddingLeft='6px';

helpDiv.style.height='24px';

if (strhelpImage)

{

var helpImg = document.createElement("img");

helpImg.setAttribute("src",strhelpImage);

helpImg.style.marginRight='8px';

helpImg.style.verticalAlign='middle';

helpDiv.appendChild(helpImg);

}

var helpText = document.createTextNode(strHelpText);

helpDiv.appendChild(helpText);

newDiv.appendChild(horLine);

newDiv.appendChild(helpDiv);

}

lastTooltip=newDiv;

if (document.addEventListener)

document.addEventListener("mousemove",moveTooltip, true);

if (document.attachEvent)

document.attachEvent("onmousemove",moveTooltip);

var bodyRef = document.getElementsByTagName("body").item(0);

bodyRef.appendChild(newDiv);

}

};

moveTooltip = function (e)

{

if(lastTooltip)

{

if (document.all)

e = event;

if (e.target)

sourceEl = e.target;

else if (e.srcElement)

sourceEl = e.srcElement;

var coors=findPos(sourceEl);

var positionLeft = e.clientX;

var positionTop = coors[1] + sourceEl.clientHeight + 1;

lastTooltip.style.top=positionTop+'px';

lastTooltip.style.left=positionLeft+'px';

lastTooltip.style.visibility='visible';

}

}

hideTooltip = function ()

{

var bodyRef = document.getElementsByTagName("body").item(0);

if (lastTooltip)

bodyRef.removeChild(lastTooltip);

lastTooltip=null;

};

function findPos(obj)

{

var curleft = curtop = 0;

if (obj.offsetParent)

{

curleft = obj.offsetLeft

curtop = obj.offsetTop

while (obj = obj.offsetParent)

{

curleft += obj.offsetLeft curtop += obj.offsetTop

}

}

return [curleft,curtop];

}



and the javascript function calls for all the above image show are

onmouseover="showTooltip('Simple tooltip','This is simple tooltip')"

onmouseout="hideTooltip()"

onmouseover="showTooltip('Simpe tooltip with additional info','This is simple tooltip with additional help info.','Press F1 for more help.','help.png','')"
onmouseout
= "hideTooltip()"

onmouseover="showTooltip('Complex tooltip','This is complex tooltip with image.','Press F1 for more help.','help.png','graf.png')"

onmouseout="hideTooltip()"





Hope you will like this post for the tooltip in asp.net using javascript :)
you can now download source code from here

5 comments:

Tasleem Arif said...

good, few days ago i have gone/read such a tooltip of java script,but it was not from itookia :) nice effort with bitmap support as well.

Awais said...

nice post. is it possible to provide a download link to a zip of all the required files?

Asim Sajjad said...

Awais: Thanks for you comments, i am new to this field , i mean in blogging, and i have search alot how to upload the zip files for download, but couldn't find, if you have any idea about it or anyone i will be thankful to him/you

Asim Sajjad said...

Awais: Sorry for above reply now i have give link to download the code, you can know download and see the project.hope this will help you more now

wasim khan said...

Asim good work. Keep it up