CODEWITHSUNDEEP
c#jqueryasp.net-mvcrazor
Vini
Vini

Reputation: 2134

Showing the description on mouseover

I need to display the content in the description column in the table when the mouse is hovered on top of the name attribute in the table. This is the model class.

I have a table which has columns name, type and description. I need to use the column description as my hover text in my Index View.

public class mouseover
{
    public int ID { get; set; }
    public string name { get; set; }
    public string type { get; set; }
    public string description { get; set; }
}

View

@model IEnumerable<description.Models.mouseover>

@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.name)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.type)
    </th>
    @*<th>
        @Html.DisplayNameFor(model => model.description)
    </th>*@
    <th></th>
</tr>

@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.name)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.type)
    </td>
    @*<td>
        @Html.DisplayFor(modelItem => item.description)
    </td>*@
    <td>
        @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
        @Html.ActionLink("Details", "Details", new { id=item.ID }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.ID })
    </td>
</tr>
}

Upvotes: 3

Views: 14735

Answers (1)

Alberto
Alberto

Reputation: 1863

You can use HTML title global attribute but why don't you use Boostrap tooltip to achieve your goal?

Documentation

Check this Fiddle: it has a simple table with one row and column, as example for your table.

<td data-toggle="tooltip" title="Description" data-placement="right">
    Name
</td>

As you can see you just need to change Name and Description with @item.name and @item.description. You have also to enable tooltips: 

$(function () {
  $('[data-toggle="tooltip"]').tooltip();
})

Remember to include all needed css and js files of course jQuery and Bootstrap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Let me know if this was useful.

Upvotes: 6

Related Questions