鼠标悬停时显示描述

本文关键字：描述 显示 悬停 鼠标 | 更新日期: 2023-09-27 18:14:44

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

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

public class mouseover
{
    public int ID { get; set; }
    public string name { get; set; }
    public string type { get; set; }
    public string description { get; set; }
}
<<p> 视图/strong> 
@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>
}

鼠标悬停时显示描述

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

文档

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

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

您可以看到，您只需要更改名称和描述与@item.name和@item.description。您还必须启用tooltips: 

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

请告诉我这是否有用

相关文章：