Как отобразить полную длину деталей при наведении мыши на усеченные детали в приложении MVC?

Question

Я хочу отображать полную длину деталей при наведении мыши на усеченные детали.Пожалуйста, предложите мне, как это сделать.Я попытался tooltip, но не показывал всю длину деталей.

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

Answer 1

Один из вариантов - добавить к кнопке атрибут title.

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

Другой вариант - настроить стиль кнопки так, чтобы она отображала «короткую» версию по умолчанию, а затем включить «длинную» версию на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');
})