MVC - 如何仅显示包含数据的单元格的引导工具提示

时间:2017-03-15 00:13:30

标签: jquery asp.net-mvc twitter-bootstrap tooltip

我有以下html

<tr class=@(item.Index % 2 == 0? "even" : "odd")>
    <td>@Html.DisplayFor(modelItem => item.Data.ProductId)</td>
    <td>@Html.DisplayFor(modelItem => item.Data.ProductName)</td>
    <td id="cost" title="@item.Data.ToolTip" data-toggle="tooltip" data-container="body" data-placement="right">@Html.DisplayFor(modelItem => item.Data.ProductCost,"Currency")</td>
    <td>@Html.DisplayFor(modelItem => item.Data.ToolTip)</td>
</tr>

jquery用于切换工具提示:

$(function () {
    if ($('#cost').text() != '') {
        $('[data-toggle="tooltip"]').tooltip();
    }
});

我希望仅在单元格有数据的情况下显示tooltips。 我的方式似乎没有奏效。 我错过了什么?

1 个答案:

答案 0 :(得分:0)

在td中添加一个跨度,并在跨度上显示工具提示。然后,如果跨度中没有内容 - 隐藏它。另请注意,您需要为表格提供唯一ID,以便在此结构中有多行时可能需要更改#cost。

ServerInfoTimeout

和用于切换span的jquery:

<tr class=@(item.Index % 2 == 0? "even" : "odd")>
    <td>@Html.DisplayFor(modelItem => item.Data.ProductId)</td>
    <td>@Html.DisplayFor(modelItem => item.Data.ProductName)</td>
    <td id="cost"><span title="@item.Data.ToolTip" data-toggle="tooltip" data-container="body" data-placement="right">@Html.DisplayFor(modelItem => item.Data.ProductCost,"Currency")</span></td>
    <td>@Html.DisplayFor(modelItem => item.Data.ToolTip)</td>
</tr>
相关问题