در این پست نشان خواهیم داد که چگونه جزئیات یک سطر را در ToolTip در رویداد MouseHover با استفاده از jQuery نشان دهیم.

HTML

در صفحه HTML برنامه یک gridview با دوستون ایجاد می کنیم.

<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
    </Columns>
</asp:GridView>

فضای نام (NameSpace)

نیاز داریم که فضای نام System.Data را به برنامه اضافه کنیم.

اتصال محتوای gridview و ToolTip به سطرهای gridview

gridview را با اطلاعاتساختگی پر می کنیم. متوجه خواهید شد که Data Table دارای سه ستون می باشد در حالی که gridview تنها دارای دو ستون BoundField می باشد.

توضیحات ستون سوم بعنوان ToolTip برای سطر gridview در رویداد OnRowDataBound تنظیم می شود. اگر با ماوس روی سطرgridview حرکت کنید، ToolTip نشان داده خواهد شد.

کد #C

protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Description",typeof(string)) });
            dt.Rows.Add(1, "ایمان مدائنی", "مدیر شرکت برنامه نویسان");
            dt.Rows.Add(2, "سجاد باقرزاده", "برنامه نویس در برنامه نویسان");
            dt.Rows.Add(3, "بهار امین لو", "برنامه نویس در برنامه نویسان");
            dt.Rows.Add(4, "مسعود شریفی", "برنامه نویس در برنامه نویسان");
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }

    protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.ToolTip = (e.Row.DataItem as DataRowView)["Description"].ToString();
        }
    }

اجرای jQuery برای ToolTip

در سمت کاربر، یک حلقه jQuery برای سطر GridView اجرا می کنیم، یعنی HTML TR و برای هر ردیف gridview پلاگین  SimpleTip jQuery اعمال می شود. بنابراین زمانی که بر روی سلول های gridview حرکت می کند، ToolTip برای هرسطر نشان داده خواهد شد.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.simpletip/1.3.1/jquery.simpletip-1.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=GridView1] tr').each(function () {
            var toolTip = $(this).attr("title");
            $(this).find("td").each(function () {
                $(this).simpletip({
                    content: toolTip
                });
            });
            $(this).removeAttr("title");
        });
    });
</script>

CSS برای استایل دهی به ToolTip

کلاس CSS که در زیر میبینید، برای استایل SimpleTip ToolTip استفاده می شود. شما می توانید آن را در صفحه همانطور که در زیر می بینید یا در فایل کلاس CSS قرار دهید.

<style type="text/css">
    .tooltip
    {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        display: none;
        background-color: #FB66AA;
        color: White;
        padding: 5px;
        font-size: 10pt;
        font-family: Arial;
    }
    td
    {
        cursor: pointer;
    }
</style>

خروجی برنامه در زیر مشاهده می شود.