در این مقاله قصد داریم زمانی که dropdown list خود را باز کردیم لیستی از اطلاعاتی را به ما نمایش دهد که با باز کردن لیست روی هر کدام که بروید یک Tooltip نمایش دهد.

ابتدا داخل صفحه ی aspx خود قطعه کد html زیر را می نویسید:

<asp:DropDownList ID = "ddlCustomers" runat="server">
    <asp:ListItem Text="لطفا انتخاب نمایید" Value="0" />
    <asp:ListItem Text="مریم احمدی" Value="1" />
    <asp:ListItem Text="سارا محمدی" Value="2" />
    <asp:ListItem Text="سحر رمضانی" Value="3" />
    <asp:ListItem Text="مینا داوری" Value="4" />
</asp:DropDownList>
<script type="text/javascript">
    window.onload = function () {
        var ddlCustomers = document.getElementById("<%=ddlCustomers.ClientID %>");
        for (var i = 1; i < ddlCustomers.options.length; i++) {
            var title = "کد مشتری: " + ddlCustomers.options[i].value;
            ddlCustomers.options[i].setAttribute("title", title);
        }
    };
</script>

کد بالا با استفاده از javascript این کار را انجام می دهد.

خروجی به صورت زیر خواهد شد:

حالا اضافه کردن Tooltip برای لیست dropdown list با استفاده از جی کوئری:

در صفحه ی html  خود قطعه کد زیر را قرار می دهیم و با استفاده از جی کوئری همان مثال بالا را انجام می دهیم:

<asp:DropDownList ID = "ddlCustomers" runat="server">
     <asp:ListItem Text="لطفا انتخاب نمایید" Value="0" />
    <asp:ListItem Text="مریم احمدی" Value="1" />
    <asp:ListItem Text="سارا محمدی" Value="2" />
    <asp:ListItem Text="سحر رمضانی" Value="3" />
    <asp:ListItem Text="مینا داوری" Value="4" />
</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 = "کد مشتری: " + $(this).val();
                $(this).attr("title", title);
            }
        });
    });
</script>