jQuery Dynamic tooltip inside a Webgrid

Question

How would I go about adding a Tooltip to a specific set of values in a MVC webgrid? The purpose of this tool tip will to be show a dynamic price which is located in a back-end database. When the user hovers over any cells in column 6 after row 1, I want to display the tooltip. I have looked at Bootstrap Tooltips but I'm unsure what selector to use. The desired column is shown below in red:

Here is the code snippet for my MVC webgrid:

@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()
            )
        )
    )
)

Edit: I want to accomplish something very similar to here.

score 0 · Accepted Answer · edited May 23 '17 at 11:45

After reviewing this SO answer, I was able to figure out how to get a tooltip to show up for a specific column (excluding the column header). Here is my updated code snippet:

@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()
            )
        )
    )
)

jQuery Dynamic tooltip inside a Webgrid

1 Answers1