在鼠标悬停时显示说明

Question

当鼠标悬停在表格中的名称属性顶部时，我需要在表格的描述列中显示内容。这是模型类。

我有一个包含列名称、类型和描述的表。我需要使用列描述作为索引视图中的悬停文本。

public class mouseover
{
    public int ID { get; set; }
    public string name { get; set; }
    public string type { get; set; }
    public string description { get; set; }
}

看法

@model IEnumerable<description.Models.mouseover>

@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.name)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.type)
    </th>
    @*<th>
        @Html.DisplayNameFor(model => model.description)
    </th>*@
    <th></th>
</tr>

@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.name)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.type)
    </td>
    @*<td>
        @Html.DisplayFor(modelItem => item.description)
    </td>*@
    <td>
        @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
        @Html.ActionLink("Details", "Details", new { id=item.ID }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.ID })
    </td>
</tr>
}

Answer 1

您可以使用 HTMLtitle全局属性，但为什么不使用 Boostrap 工具提示来实现您的目标？

文档

检查这个小提琴：它有一个简单的表格，只有一行和一列，作为你的表格的例子。

<td data-toggle="tooltip" title="Description" data-placement="right">
    Name
</td>

如您所见，您只需要使用@item.name和更改 Name 和 Description @item.description。您还必须启用工具提示：

$(function () {
  $('[data-toggle="tooltip"]').tooltip();
})

记住包括所有需要的 css 和 js 文件，当然还有 jQuery 和 Bootstrap：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

让我知道这是否有用。