dropdown list - show tool tip

  • Thread starter Thread starter RJN
  • Start date Start date
R

RJN

Hi

The texts in the dropdown are too long and the width is not sufficient
to show the entire text. Increasing the width is not an option. Is there
a way to show the selected item text as a tooltip on mouse over?

Thanks

Rjn
 
hi RJN....

try if u can modify this to ur needs.

***************Javascript block*********************
<SCRIPT language=JavaScript>
<!--
showHideTooltip = function () {
var obj = event.srcElement;
with(document.getElementById("tooltip")) {
innerHTML = obj.options[obj.selectedIndex].value;
with(style) {
if(event.type == "mouseleave") {
display = "none";
} else {
display = "inline";
left = event.x;
top = event.y;
}
}
}
}
//-->
</SCRIPT>

*********************HTML block***********************
<BODY><SPAN id=tooltip
style="BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 3px; BORDER-TOP:
#000000 1px solid; DISPLAY: none; PADDING-LEFT: 3px; FONT-SIZE: 12px;
PADDING-BOTTOM: 3px; BORDER-LEFT: #000000 1px solid; PADDING-TOP: 3px;
BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: Verdana; POSITION: absolute;
BACKGROUND-COLOR: #a6bed9"></SPAN><SELECT
onmouseleave=showHideTooltip() onmouseenter=showHideTooltip()> <OPTION
value="Enter the data for the select box tool tip here"
selected>One</OPTION>
<OPTION
value="This tool tip was created by Binil on 2nd February 2005. To display
the Risk Event Info">Two</OPTION>
<OPTION value="Enter Data">Three</OPTION> <OPTION
value="If u want you can change the styles mentioned in the span tag to
the style sheet">Four</OPTION>
<OPTION value=Thanks>Five</OPTION></SELECT> </BODY></HTML>
********************************************************

Hope this helps
Kannan.V
 
hi,
this is the modified code to use with the ASP.net dropdown list control

This code piece provides with a tooltip for the dropdown list.
The drop down list can be set to a smaller width and the tooltip will show
the value in the dropdown list.

*************JavaScript Section****************
<CODE>
<SCRIPT language="JavaScript">
<!--
showHideTooltip = function ()
{
var obj = document.getElementById("DropDownList1");
document.getElementById("tooltip").innerHTML =
obj.options[obj.selectedIndex].value;
if(event.type == "mouseleave")
{
document.getElementById("tooltip").style.display = "none";
}
else
{
document.getElementById("tooltip").style.display = "inline"
document.getElementById("tooltip").style.top = event.y;
document.getElementById("tooltip").style.left = event.x;
}
}
//-->
</SCRIPT>
</CODE>
******************HTML Section of the aspx page***********
<CODE>
<form id="Form1" method="post" runat="server">
<SPAN id="tooltip" style="BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT:
3px; BORDER-TOP: #000000 1px solid; DISPLAY: inline; PADDING-LEFT: 3px;
FONT-SIZE: 12px; PADDING-BOTTOM: 3px; BORDER-LEFT: #000000 1px solid;
PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: Verdana;
POSITION: absolute; BACKGROUND-COLOR: #a6bed9">
</SPAN>
<asp:DropDownList id="DropDownList1" style="Z-INDEX: 101; LEFT: 104px;
POSITION: absolute; TOP: 160px"
runat="server" Width="80px" Height="24px">
<asp:ListItem Value="One" Selected="True">One</asp:ListItem>
<asp:ListItem Value="Two">Two</asp:ListItem>
<asp:ListItem
Value="Threeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee">Threeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</asp:ListItem>
<asp:ListItem Value="Four">Four</asp:ListItem>
<asp:ListItem Value="Five">Five</asp:ListItem>
</asp:DropDownList>
</form>
</CODE>

Hope this helps you
Kannan.V
 
Thanks for the suggestion. I want the tooltip to change on change of
selection i.e, move the mouse over on any of the list item, then the
tooltip should come up. Currently the tool tip comes after the item is
selected and the mouse is moved over the list box. I tried doing this,
but I could not find any event for the <option> element
 
Back
Top