Webgrid 中的 jQuery 动态工具提示答案

【问题标题】：jQuery Dynamic tooltip inside a WebgridWebgrid 中的 jQuery 动态工具提示
【发布时间】：2016-04-06 15:52:33
【问题描述】：

如何将工具提示添加到 MVC 网络网格中的一组特定值？此工具提示的目的是显示位于后端数据库中的动态价格。当用户将鼠标悬停在第 1 行之后的第 6 列中的任何单元格上时，我想显示工具提示。我看过Bootstrap Tooltips，但我不确定要使用什么选择器。所需的列在下面以红色显示：

这是我的 MVC webgrid 的代码 sn-p：

@grid.GetHtml(
    htmlAttributes: new { id="productSearchGrid" },
    mode:WebGridPagerModes.All,
    tableStyle: "table table-hover table-bordered table-responsive",
    columns: grid.Columns(
        grid.Column("ID", "Product ID", style: "span1", canSort: true),
        grid.Column("ProductTypeDescription", "Product Type", style: "span2", canSort: true),
        grid.Column("ProductName", "Product Name", style: "span2", canSort: true),
        grid.Column("Price", "Current Price", format: (item) => String.Format("{0:C}", @item.Price), style: "span2", canSort: true),
        grid.Column("EffectiveDate", "Effective Date", (format: (item) => (item.EffectiveDate != DateTime.MinValue && item.EffectiveDate
            != null ? new HtmlString(
            item.EffectiveDate.ToString("yyyy-MM-dd")
            ).ToString() : new HtmlString("---").ToString())), style: "span2", canSort: false),
        grid.Column("TerminateDate", "Terminate Date", (format: (item) => (item.TerminateDate != DateTime.MinValue && item.TerminateDate
            != null ? new HtmlString(
            item.TerminateDate.ToString("yyyy-MM-dd")
            ).ToString() : new HtmlString("---").ToString())), style: "span2", canSort: false),
        grid.Column("Select", format: (item) =>
            new HtmlString(
            Html.ActionLink("Select", "AddOrEditProduct", "Product", new
                {
                    productID = item.ID
                }, null).ToString()
            )
        )
    )
)

编辑：我想完成与here 非常相似的事情。

【问题讨论】：

标签： javascript c# jquery asp.net-mvc

【解决方案1】：

在查看this SO 答案后，我能够弄清楚如何获取工具提示以显示特定列（不包括列标题）。这是我更新的代码 sn-p：

@grid.GetHtml(
    htmlAttributes: new { id="productSearchGrid" },
    mode:WebGridPagerModes.All,
    tableStyle: "table table-hover table-bordered table-responsive",
    columns: grid.Columns(
        grid.Column("ID", "Product ID", style: "span1", canSort: true),
        grid.Column("ProductTypeDescription", "Product Type", style: "span2", canSort: true),
        grid.Column("ProductName", "Product Name", style: "span2", canSort: true),
        grid.Column("Price", "Current Price", format: (item) => String.Format("{0:C}", @item.Price), style: "span2", canSort: true),
        grid.Column("EffectiveDate", "Effective Date", (format: (item) => (item.EffectiveDate != DateTime.MinValue && item.EffectiveDate
            != null ? new HtmlString(
            item.EffectiveDate.ToString("yyyy-MM-dd")
            ).ToString() : new HtmlString("---").ToString())), style: "span2", canSort: false),
        grid.Column("TerminateDate", "Terminate Date", (format: (item) => (item.TerminateDate != DateTime.MinValue && item.TerminateDate
            != null ? @Html.Raw(("<span id='' title='" + item.Price + "'>" + item.TerminateDate.ToString("yyyy-MM-dd")
            ).ToString() + "</span>") : new HtmlString("---").ToString())), style: "span2", canSort: false),
        grid.Column("Select", format: (item) =>
            new HtmlString(
            Html.ActionLink("Select", "AddOrEditProduct", "Product", new
                {
                    productID = item.ID
                }, null).ToString()
            )
        )
    )
)

【讨论】：