افزودن ToolTip به آیتم های DrpdownList با استفاده از JavaScript و jQuery

چهارشنبه 25 آذر 1394

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

افزودن ToolTip به آیتم های DrpdownList با استفاده از JavaScript و jQuery

ابتدا داخل صفحه ی 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>

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید