[英]jQuery Dynamic tooltip inside a Webgrid
How would I go about adding a Tooltip to a specific set of values in a MVC webgrid? 如何将工具提示添加到MVC网络网格中的一组特定值? 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.
当用户将鼠标悬停在第1行后第6列的任何单元格上时,我要显示工具提示。 I have looked at Bootstrap Tooltips but I'm unsure what selector to use.
我看过Bootstrap工具提示,但不确定使用什么选择器。 The desired column is shown below in red:
所需的列以红色显示在下面:
Here is the code snippet for my MVC webgrid: 这是我的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 . 编辑:我想完成与此处非常相似的操作。
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). 在查看了该 SO答案之后,我能够弄清楚如何获得针对特定列(不包括列标题)的工具提示。 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()
)
)
)
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.