如何在MVC应用程序中从截断的细节中显示鼠标悬停的详细信息？

Question

我希望从截断的详细信息中显示鼠标悬停的详细信息。请建议我如何做到这一点。我尝试了<div id="navigation"></div> <div id="menunBar"></div> <div id="mainContent"></div>但没有显示完整的详细信息。

tooltip

Answer 1

一个选项是在按钮

中添加title属性

<button title="@item.Detail" ...>

另一个选择是设置按钮的样式以显示“短”＆＃39;默认情况下版本，然后切换＆＃39; long＆＃39;版本mouseover

<button ....>
    <div class="truncate">@item.Detail </div>
</button>

CSS

.truncate {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

的jQuery

$('.truncate').hover(function(){
    $(this).toggleClass('truncate');
})