Question

当鼠标悬停在表格中的name属性顶部时，我需要在表格的说明栏中显示内容。这是模型类。

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

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

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

Documentation

选中此Fiddle：它有一个包含一行和一列的简单表格，作为您的表格的示例。

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

如您所见，您只需要使用@item.name和@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>

请告诉我这是否有用。

显示有关鼠标悬停的说明

1 个答案: