dropdown list - show tool tip

Discussion in 'ASP .Net' started by RJN, Apr 26, 2005.

  1. RJN

    RJN Guest

    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 ***
    RJN, Apr 26, 2005
    #1
    1. Advertising

  2. 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 ***
    >
    =?Utf-8?B?S2FubmFuLlYgW01DU0QubmV0XQ==?=, Apr 26, 2005
    #2
    1. Advertising

  3. 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

    "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 ***
    >
    =?Utf-8?B?S2FubmFuLlYgW01DU0QubmV0XQ==?=, Apr 27, 2005
    #3
  4. RJN

    RJN Guest

    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 ***
    RJN, Apr 27, 2005
    #4
  5. RJN

    shalugoel

    Joined:
    May 19, 2008
    Messages:
    1
    Please post the slouiton. I am also looking for same functionality.
    shalugoel, May 19, 2008
    #5
  6. RJN

    jagannathgv

    Joined:
    Jan 27, 2010
    Messages:
    1
    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>
    jagannathgv, Jan 27, 2010
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. herr lucifer

    Free Balloon tool tip for .NET apps

    herr lucifer, Apr 17, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    3,558
    Scott M.
    Apr 22, 2005
  2. Naveen

    Tool Tip for DropDown list

    Naveen, Sep 5, 2004, in forum: ASP .Net Building Controls
    Replies:
    1
    Views:
    138
    [MSFT]
    Sep 6, 2004
  3. Vijay

    tool tip for dropdown box, placed in data grid control

    Vijay, Aug 31, 2006, in forum: ASP .Net Datagrid Control
    Replies:
    1
    Views:
    144
    Ken Cox [Microsoft MVP]
    Sep 4, 2006
  4. David Mark
    Replies:
    16
    Views:
    893
    Scott Sauyet
    Nov 11, 2011
  5. David Mark
    Replies:
    58
    Views:
    1,385
    David Mark
    Dec 6, 2011
Loading...

Share This Page