如何在MVC应用程序中从截断的细节上显示鼠标的全部细节?

问题描述

我想在鼠标悬停在截断的详细信息上显示完整的详细信息.请建议我该怎么做.我尝试了 tooltip ，但未显示完整的详细信息.

I want to display full length of details on mouse over from truncated details. Please suggest me how to do this. I tried tooltip but not showing the full length of details.

<table class="table">

        <tr>
            <th>@Html.DisplayNameFor(m => m.A)</th>
            <th>@Html.DisplayNameFor(m => m.Details)</th>
        </tr>  

    @foreach (var item in Model)
    {

            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.A)

                </td>

                <td>
                    @{
                        var Details = "";
                        if (item.Details.Length > 10)
                        {
                            Details = item.Details.Substring(0, 10) + "...";
                        }
                        else
                        {
                            Details = item.Details;
                        }
                    }
                    <button class="link" type="button" data-id="@item.Id">
                        @Html.DisplayFor(modelItem => Details)
                    </button>

                </td>

            </tr>    

   }
</table>

推荐答案

一种选择是向按钮添加 title 属性

One option is to add a title attribute to the button

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

另一种方法是默认设置按钮的样式以显示短"版本，然后在 mouseover

Another option is to style the button to show a 'short' version by default and then toggle the 'long' version on 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');
})

这篇关于如何在MVC应用程序中从截断的细节上显示鼠标的全部细节?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！