dropdown list - show tool tip

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
 
G

Guest

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
 
G

Guest

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
 
R

RJN

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
 
J

jagannathgv

Joined
Jan 27, 2010
Messages
1
Reaction score
0
Here is the refined code

Just add "title" attribute in the Dropdownlist control as shown below:





*************JavaScript Section****************
<CODE>
<SCRIPT language="JavaScript">
<!--
function showHideTooltip()
{
var obj = document.getElementById("DropDownList1");
obj.title=obj.options[obj.selectedIndex].title;
}
//-->
</SCRIPT>
</CODE>
******************HTML Section of the aspx page***********
<CODE>
<form id="Form1" method="post" runat="server">
<asp:DropDownList id="DropDownList1" style="Z-INDEX: 101; LEFT: 104px;
POSITION: absolute; TOP: 160px"
runat="server" Width="80px" Height="24px" onmouseover="showHideTooltip()" >
<asp:ListItem Value="One" title="One" Selected="True">One</asp:ListItem>
<asp:ListItem Value="Two" title="Two">Two</asp:ListItem>
<asp:ListItem
Value="Threeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeee" title="Threeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeee" >Threeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeee</asp:ListItem>
<asp:ListItem Value="Four" title="Four">Four</asp:ListItem>
<asp:ListItem Value="Five" title="Five">Five</asp:ListItem>
</aspropDownList>
</form>
</CODE>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to add dropdown selected data to table using jquery 2
Add Image and label dynamically inside the dropdown 2
Multi select options in a menu 1
How to position the *tooltip* comment on these buttons? 9
<Button ...> display is fine, except for two things 1
tool tip time question 2
Tool Tip in GridView 1
Tool Tip for DropDown list 1

Members online

No members online now.
Total: 22 (members: 0, guests: 22)
Robots: 156

Forum statistics

Threads
473,756
Messages
2,569,534
Members
45,007
Latest member
OrderFitnessKetoCapsules

Latest Threads

Top