473,320 Members | 1,867 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

dropdown list - show tool tip

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

*** Sent via Developersdex http://www.developersdex.com ***
Nov 19 '05 #1
3 16126
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

"RJN" wrote:
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

*** Sent via Developersdex http://www.developersdex.com ***

Nov 19 '05 #2
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="Threeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeee">Threeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeee</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

"RJN" wrote:
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

*** Sent via Developersdex http://www.developersdex.com ***

Nov 19 '05 #3
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

*** Sent via Developersdex http://www.developersdex.com ***
Nov 19 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: news | last post by:
Hello, I need help with the following problem: An HTML page that have two dropdown list whit different values: 1. Dropdown list 1(tblname1) =values with different location's. After user...
7
by: Nicolae Fieraru | last post by:
Hi All, I am trying to change the rowsource of a combobox when I click on it. I played with many events, associated with the form and the combobox, but still haven't figured out what is the way...
5
by: david | last post by:
I have a question in the following. Any one could give me a help? Thanks David The dataset is declared and created at Class level. My source code is here: Private Sub...
2
by: Mike Collins | last post by:
I cannot get the correct drop down list value from a drop down I have on my web form. I get the initial value that was loaded in the list. It was asked by someone else what the autopostback was...
6
by: yasodhai | last post by:
Hi, I used a dropdown control which is binded to a datagrid control. I passed the values to the dropdownlist from the database using a function as follows in the aspx itself. <asp:DropDownList...
0
by: Andrus | last post by:
I'm using WinForms DataGridView I need to make dropdown list wider that grid column width. I tried the following code, but dropdown list widht is the same as column width. How to increase...
1
by: luispunchy | last post by:
I have an accordion style dropdown list/sublist menu (functions similar to the "today on WebMD video" widget found on http://www.webmd.com/) - it will allow users to click on a headline (from the...
5
by: abhi3211 | last post by:
i am using java inside java script page. in that page i want to use two dropdown list. in first dropdown list i am getting data from ms-access database. in second dropdown list i want to get data...
3
by: John | last post by:
I have two dropdown lists that I have bound to a datatable and set the DataTextField and DataValueField for. Both lists show the values I expect from the database. However, when I need to access...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.