Prizes & Awards
My Profile
Active Members
TodayLast 7 Days
more...
|
 New Feature: Community Sites:
Create your own .NET community website and start earning from Google AdSense !
It's Free !
|
Javascript ToolTip
Posted Date: 27 Aug 2008 Resource Type: Articles Category: Web Applications
|
Posted By: Ritesh N. Jain Member Level: Gold
Rating:  Points: 10
|
Introduction
First let me define the word "ToolTip".Many time you have notice a small "Yellow" rectangular box with some text that shows up when you move your mouse over certain control, It remains visible for few seconds and get's disappear.That is what is called “ToolTip”.Tooltip is very good way to dynamically show more information about particular control and it’s functionality when mouse is hover on it.
In ASP.NET most of control exposes property called “ToolTip” that can be set at design or run time to show the custom text whenever mouse is hover over that particular control.
As I mentioned above this ToolTip last only for few seconds which sometime is not sufficient to go through entire text of ToolTip and user can easily get irritate by repeatedly moving mouse over control to finish it off reading entire text.
Along with that programmer has very less or almost no control of font,color,backcolor of ToolTip that may be sometime necessary to make your page look more attractive or to match tooltip with current Page Schema.
Considering all above fact,ToolTip created using JavaScript or CSS Style sheet seems to be very good option as one can easily overcome all above negative point.
In this Article I will go ahead with Tooltip created using Javascript.The simple logic behind JavaScript tool tips is to Show HTML tag like DIV or SPAN dynamically with some text in it whenever onmouseover event occurs on certain control and Hide during onmouseout event.
Below is HTML view of ASPX page that I have used for sample
<SPAN id="spnToolTip" style="BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8pt; Z-INDEX: 111; BACKGROUND: lightyellow; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: gray 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: gray 1px solid; FONT-FAMILY: Verdana; POSITION: absolute" onmouseout="hideToolTip()">
</SPAN>
And
<script language="javascript">
function showToolTip(text) {
var toolTip = document.getElementById("spnToolTip");
toolTip.style.top = window.event.clientY + 10;
toolTip.style.left = window.event.clientX;
toolTip.innerHTML = text;
toolTip.style.visibility = "visible";
toolTip.style.background = 'lightyellow';
}
function showToolTipColorBG(text,color) {
var toolTip = document.getElementById("spnToolTip");
toolTip.style.top = window.event.clientY + 10;
toolTip.style.left = window.event.clientX;
toolTip.innerHTML = text;
toolTip.style.visibility = "visible";
toolTip.style.background = color;
}
function hideToolTip() {
document.getElementById("spnToolTip").style.visibility = "hidden";
}
</script>
I have used Two Jscript function i.e. showToolTip and showToolTipColorBG ,Both function performs exactly same operation, the only difference is later one allow programmer to create his own custom background color for ToolTips while the first one uses Normal default ToolTip color.
Let me explain first function, It takes parameter as “text” to be shown when mouse is hover over a particular control.
1> var toolTip = document.getElementById("spnToolTip");
Above line Find the spnToolTip control from Page and assign it to variable toolTip
2>
toolTip.style.top = window.event.clientY + 10;
toolTip.style.left = window.event.clientX;
Above line sets the relative position of the span control with respect to control that fires the event.
3> toolTip.innerHTML = text;
Above line sets the InnerHTML text property of span to the Text to e shown
4> toolTip.style.visibility = "visible";
Above line Set’s span control visible.
5> toolTip.style.background = 'lightyellow';
Above line set the background color of Span (normally ToolTip are lightyellow in color)
Below is the Codebind part, where you bind the omouseoever and onmouseout event of server control like Lable,Textbox,linkbutton etc with above JavaScript .
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
If Not IsPostBack Then
labName.Attributes.Clear()
labName.Attributes.Add("onMouseOver", "showToolTip('Lable ToolTip:Enter you name')")
labName.Attributes.Add("onMouseOut", "hideToolTip(this)")
tbName.Attributes.Clear()
tbName.Attributes.Add("onMouseOver", "showToolTip('Textbox ToolTip:Enter you name')")
tbName.Attributes.Add("onMouseOut", "hideToolTip(this)")
butSend.Attributes.Clear()
butSend.Attributes.Add("onMouseOver", "showToolTip('Button ToolTip:Click here to send your name')")
butSend.Attributes.Add("onMouseOut", "hideToolTip(this)")
lnkbtnGoogle.Attributes.Clear()
lnkbtnGoogle.Attributes.Add("onMouseOver", "showToolTip('Link button ToolTip:Click here to Google your name')")
lnkbtnGoogle.Attributes.Add("onMouseOut", "hideToolTip(this)")
labNameC.Attributes.Clear()
labNameC.Attributes.Add("onMouseOver", "showToolTipColorBG('Lable ToolTip:Enter you name','LightBlue')")
labNameC.Attributes.Add("onMouseOut", "hideToolTip(this)")
tbNameC.Attributes.Clear()
tbNameC.Attributes.Add("onMouseOver", "showToolTipColorBG('Textbox ToolTip:Enter you name','Yellow')")
tbNameC.Attributes.Add("onMouseOut", "hideToolTip(this)")
butSendC.Attributes.Clear()
butSendC.Attributes.Add("onMouseOver", "showToolTipColorBG('Button ToolTip:Click here to send your name','LightGreen')")
butSendC.Attributes.Add("onMouseOut", "hideToolTip(this)")
lnkbtnGoogleC.Attributes.Clear()
lnkbtnGoogleC.Attributes.Add("onMouseOver", "showToolTipColorBG('Link button ToolTip:Click here to Google your name','White')")
lnkbtnGoogleC.Attributes.Add("onMouseOut", "hideToolTip(this)")
End If
End Sub
Once you have finish with above you can run the above code to check your colorful custom ToolTip created using JavaScript.
One can also play with other property of Span control like Font, Color etc to make it more customizable.
Hope this article will be helpful.
Attached is the Sample ASPX page that one can use.
PS: Above JavaScript is Tested on IE5.0 +
 Attachments
Sample ASPX Page (20537-27148-JavaToolTip.zip)
|
Responses
|
| Author: Ritesh N. Jain 27 Aug 2008 | Member Level: Gold Points : 1 | seems HTML part of ASPX got supressed having control :(
Anyone looking for code please check the attachment.
|
|