MVC应用中如何实现鼠标悬停显示截断详情的完整内容？

嘿，我看你在ASP.NET MVC的表格里遇到了tooltip没法完整展示详情的问题，之前尝试没搞定对吧？结合你现有的代码，这里有几个简单靠谱的方案，你可以根据自己的项目情况选：

方案1：用原生HTML的title属性（零依赖最省心） #

浏览器自带的title属性其实就是个原生tooltip，只要把完整的详情内容赋值给它，鼠标一悬停就会自动显示全部文本，完全不需要额外的JS或者CSS。

把你Details列的代码改成这样就行：

<td>
    @{
        var truncatedDetails = item.Details.Length > 10 
            ? item.Details.Substring(0, 10) + "..." 
            : item.Details;
    }
    <!-- 用span更合适，毕竟只是展示文本；要是非要保留button，给button加title属性也一样 -->
    <span class="truncated-text" title="@item.Details">@truncatedDetails</span>
</td>

这个方案的好处就是兼容性拉满，所有浏览器都支持，而且长文本会自动换行显示，完全不用操心样式问题。

方案2：用Bootstrap Tooltip（如果项目已经用Bootstrap） #

要是你的项目本来就引入了Bootstrap，那它的tooltip组件是更好的选择——样式美观，还能自定义位置、样式，处理长文本也很稳。

先确保你已经加载了Bootstrap的CSS和JS，然后修改代码：

<td>
    @{
        var truncatedDetails = item.Details.Length > 10 
            ? item.Details.Substring(0, 10) + "..." 
            : item.Details;
    }
    <button class="link" type="button" data-bs-toggle="tooltip" data-bs-title="@item.Details">
        @truncatedDetails
    </button>
</td>

然后在页面底部加一段初始化的JS：

<script>
    // 初始化所有Bootstrap tooltip
    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
        new bootstrap.Tooltip(el);
    });
</script>

这样就能得到一个样式统一、交互流畅的tooltip，长文本也能完整展示。

方案3：自定义CSS Tooltip（完全掌控样式） #

如果你想完全自定义tooltip的外观——比如改背景色、字体大小、宽度，那纯CSS实现的tooltip就很适合你。

先在页面的样式里加这段CSS：

/* 父元素设置相对定位 */
.custom-tooltip {
    position: relative;
    cursor: pointer;
}

/* tooltip的样式 */
.custom-tooltip .tooltip-content {
    visibility: hidden;
    width: 220px; /* 自定义宽度，适配你的长文本 */
    background-color: #2d2d2d;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    position: absolute;
    z-index: 100;
    bottom: 130%; /* 调整tooltip的位置，避免挡住文本 */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: pre-wrap; /* 保留文本里的换行，自动换行 */
}

/* 鼠标悬停时显示tooltip */
.custom-tooltip:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
}

然后修改你的HTML代码：

<td>
    @{
        var truncatedDetails = item.Details.Length > 10 
            ? item.Details.Substring(0, 10) + "..." 
            : item.Details;
    }
    <span class="custom-tooltip">
        @truncatedDetails
        <span class="tooltip-content">@item.Details</span>
    </span>
</td>

这个方案能让你完全按照项目的UI风格来定制tooltip，想怎么改就怎么改。

内容的提问来源于stack exchange，提问作者User9895