locked
Dropdownlist item's tooltip is hidden RRS feed

  • Question

  • User-809753952 posted

    I am showing Tooltips for all items in a dropdownlist. This drodownlist is populated dynamically.

    Some times the tooltip is hidden behind the dropdownlist. I cannot define a style for the tooltip, as it is created dynamically.

    Please help.

    Tuesday, January 16, 2018 2:12 PM

All replies

  • User-1838255255 posted

    Hi mnmhemaj,

    According to your description and needs, i make a sample in my side to show tooltip of dropdownlist, you could modify your code through my sample: 

    Sample Code: 

    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:DropDownList ID="ddlCustomers" runat="server">
                </asp:DropDownList>
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
                <script type="text/javascript">
                    $(function () {
                        $("[id*=ddlCustomers] option").each(function (i) {
                            if (i > 0) {
                                var title = "Customer ID: " + $(this).val();
                                $(this).attr("title", title);
                            }
                        });
                    });
                </script>
            </div>
        </form>
    </body>
     protected void Page_Load(object sender, EventArgs e)
         {
            DataTable dt = new DataTable();
            dt.Columns.Add("Name", typeof(string));
            dt.Columns.Add("CustomerId", typeof(string));
            dt.Rows.Add("Please Select", "0");
            dt.Rows.Add("John Hammond", "1");
            dt.Rows.Add("Mudassar Khan", "2");
            dt.Rows.Add("Suzanne Mathews", "3");
            dt.Rows.Add("Robert Schidner", "4");
            ddlCustomers.DataSource = dt;
            ddlCustomers.DataTextField = "Name";
            ddlCustomers.DataValueField = "CustomerId";
            ddlCustomers.DataBind();
        }

    Result:

    if it still can not help you solve the problem, please share your code. 

    Best Regards,

    Eric Du 

    Wednesday, January 17, 2018 5:55 AM
  • User-809753952 posted

    Hi Eric Du

    Thanks for your reply.

    I am able to show the title. But the issue is, the title is hidden behind the dropdownlist.

    How can I show the title above the dropdownlist?

    Wednesday, January 17, 2018 8:03 AM
  • User-1838255255 posted

    Hi mnmhemaj,

    I am not clear you how to write this function, if you test it in other browser, if still meet this issue, could you share your code to us? 

    Best Regards,

    Eric Du 

    Wednesday, January 17, 2018 10:26 AM
  • User-809753952 posted

    Hi Eric, here is my code

    Design

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default4.aspx.vb" Inherits="Default4" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">
        <title>tooltip demo</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
        <script src="//code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
        <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).tooltip();
         
        </script>
    
    
    </head>
    
        
        <body>
        <form runat="server" id="form1">
        <p>
            <a href="#" title="Anchor description">Anchor text</a>
            <input title="Input help">
        </p>
        <asp:DropDownList ID="ddl_faultcode" runat="server" Width="100px" Font-Size="10px"
            AppendDataBoundItems="true" AutoPostBack="true" OnDataBound="ddl_faultcode_DataBound">
        </asp:DropDownList>
        </form>
    </body>
    
    </html>
    

    Codebehind:

    Imports System.Data.SqlClient
    Imports System.Data
    
    Partial Class Default4
        Inherits System.Web.UI.Page
        Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
            If IsPostBack = False Then
    
                Dim con As SqlConnection
                Dim cmd As New SqlCommand()
                Dim constr As String = ConfigurationManager.ConnectionStrings("ServiceOrdersConnectionString").ConnectionString
    
                Dim strQuery As String = "SELECT distinct [Fault_Code_ID] ,[Fault_Code]  FROM [tblDefectFaultCode]  "
                con = New SqlConnection(constr)
                cmd = New SqlCommand()
                cmd.CommandType = CommandType.Text
                cmd.CommandText = strQuery
                cmd.Connection = con
                Try
                    con.Open()
                    ddl_faultcode.Items.Clear()
                    ddl_faultcode.DataSource = cmd.ExecuteReader()
                    ddl_faultcode.DataTextField = "Fault_Code"
                    ddl_faultcode.DataValueField = "Fault_Code_ID"
                    ddl_faultcode.DataBind()
                    If ddl_faultcode.Items.Count = 1 Then
                    Else
                        ddl_faultcode.Items.Insert(0, New ListItem("Select", "-1"))
                    End If
                Catch ex As Exception
                    Response.Write(ex.ToString)
                Finally
                    con.Close()
                    con.Dispose()
                End Try
            End If
        End Sub
    
        Protected Sub ddl_faultcode_DataBound(ByVal sender As Object, ByVal e As System.EventArgs)
    
            Dim tooltips As String = ""
    
            If ddl_faultcode.Items.Count > 0 Then
                For i As Integer = 0 To ddl_faultcode.Items.Count - 1
                    tooltips = GetFaultCodeTooltips(ddl_faultcode.Items(i).Value)
    
                    ddl_faultcode.Items(i).Attributes.Add("title", tooltips)
    
                Next
            End If
    
        End Sub
    
    
        Function GetFaultCodeTooltips(ByVal faultcode As Integer) As String
            Dim res As String = ""
    
            Dim strQuery As String = ""
    
            Dim con As SqlConnection
            Dim cmd As New SqlCommand()
            Dim constr As String = ConfigurationManager.ConnectionStrings("ServiceOrdersConnectionString").ConnectionString
            con = New SqlConnection(constr)
            cmd = New SqlCommand()
    
            strQuery = "SELECT distinct Tooltips, Fault  FROM [FaultReduced]   where  fault = " & faultcode & "   order by Fault  "
            cmd.CommandType = CommandType.Text
            cmd.CommandText = strQuery
            cmd.Connection = con
            Dim dr As SqlDataReader
            Try
                con.Open()
                dr = cmd.ExecuteReader
                While dr.Read
                    res = dr.GetString(0)
                End While
            Catch ex As Exception
                Response.Write(ex.ToString)
            Finally
                con.Close()
                con.Dispose()
            End Try
            Return res.Replace("<br>", vbCrLf)
        End Function
    
       
    
        Protected Sub ddl_faultcode_SelectedIndexChanged(sender As Object, e As System.EventArgs) Handles ddl_faultcode.SelectedIndexChanged
    
            Dim tooltips As String = ""
            For i As Integer = 0 To ddl_faultcode.Items.Count - 1
                tooltips = GetFaultCodeTooltips(ddl_faultcode.Items(i).Value)
    
                ddl_faultcode.Items(i).Attributes.Add("title", tooltips)
    
            Next
        End Sub
    End Class
    

    Wednesday, January 17, 2018 12:18 PM
  • User-1838255255 posted

    Hi mnmhemaj,

    I checked your code, i notice that you use $(document).tooltip(), you could replace the document with dropdownlist id or class, please check the following sample code:

    Sample Code: 

    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                $('.uitip').tooltip();
            });
        </script>
    </head>
    <body>
        <select multiple class='uitip' title='has tooltips'>
            <option title=""></option>
            <option title="1">1</option>
            <option title="2">2</option>
            <option title="3">3</option>
            <option title="4">4</option>
        </select>
    </body>

    Result:

    Here are someone who meet the similar issue as you, please check: 

    https://stackoverflow.com/questions/27541794/jquery-tooltip-showing-behind-dropdown 

    Best Regards,

    Eric Du 

    Thursday, January 18, 2018 3:28 AM