c# - Razor View : Minify text with three dots and show full text with tooltip

Question

如果字符串的长度超过限制，我有以下代码在字符串末尾显示点。但我还想在悬停时显示带有全文的工具提示。我不确定如何将其实现到 Razor View 元素。

@(item.Data.Title.Length > 10 ? item.Data.Title.Substring(0, 10) + "..." : item.Data.Title)

Answer 1

您可以通过 jquery 和 bootstrap 实现工具提示，如下所示。

Jsfiddle 示例:https://jsfiddle.net/z4upto60/

cshtml:

<div> 
    <a data-toggle="tooltip" title="@item.Data.Title">
        @(item.Data.Title.Length > 10 ? item.Data.Title.Substring(0, 10) + "..." : item.Data.Title)
    </a>
</div>

jquery:

if('@item.Data.Title.Length' > 10)
{
   $('a[data-toggle="tooltip"]').tooltip({
      animated: 'fade',
      placement: 'bottom',
   });
}