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

Question

我有以下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。 我的方式似乎不起作用。 我错过了什么？

Answer 1

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

<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>

还有一个用于切换跨度的 jquery：

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