Load data in tooltip dynamically in ASP.NET MVC

Load/Show data in tooltip dynamically in ASP.NET MVC

Example of Tooltip​​ : Loading data dynamically based on data on each row under the table.

To show tooltip in any action link on mouse hover , create a action method in MVC and corresponding​​ view for that action method which will come up as a tooltip.

Please follow the code to show tooltip on mouse hover​​ :

//Index.cshtml

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/bootstrap")

<script​​ type="text/javascript">

 ​​ ​​​​ 

 ​​ ​​ ​​​​ $(function​​ () {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $('.anchorDetails').hover(function​​ (e) {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ //debugger;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ e.stopPropagation();

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ e.preventDefault();

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var​​ o = $(this);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $('.anchorDetails').not(this).popover('hide');

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var​​ $buttonClicked = $(this);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var​​ id = $buttonClicked.attr('data-id');

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ var​​ name = $buttonClicked.attr('data-name');

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $.ajax({

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ type:​​ "GET",

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ cache:​​ false,

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ url:​​ '/Home/EmployeeDetail',

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ contentType:​​ "application/JSON;charset=utf-8",

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ data: {​​ "id": id,​​ "name": name },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ dataType:​​ "Text",

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ success:​​ function​​ (data) {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ // debugger;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ o.popover({

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ placement:​​ 'left',

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ html:​​ true,

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ trigger:​​ 'manual',

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ title: name +​​ '<a href="#" id="close" class="close" data-toggle="popover" data-dismiss="modal">*</a>',

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ content: data

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }).popover('toggle');

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $('.popover').css({​​ 'width':​​ '100%'​​ });

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ });

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ });

 

 ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​​​ });

 ​​ ​​​​ 

</script>

<html>

<head>

 

</head>

<body>

 ​​ ​​ ​​​​ @Html.Action("EmployeeInfo",​​ "Home");

 ​​ ​​ ​​​​ <div​​ id="myModal"​​ class="modal">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ class="modal-dialog">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ id="myModalContent"​​ class="modal-content">

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </div>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </div>

 

 ​​ ​​ ​​​​ </div>

</body>

 

</html>

 

//HomeController.cs

 

using​​ MVC_Example_using_AngularJS.Models;

using​​ System;

using​​ System.Collections.Generic;

using​​ System.Linq;

using​​ System.Web;

using​​ System.Web.Mvc;

 

namespace​​ MVC_Example_using_AngularJS.Controllers

{

 ​​ ​​ ​​​​ public​​ class​​ HomeController​​ :​​ Controller

 ​​ ​​ ​​​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ public​​ ActionResult​​ EmployeeInfo()

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ List<Employee> lstEmployee =​​ new​​ List<Employee>();

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Employee​​ objEmployee1 =​​ new​​ Employee();

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee1.ID = 1;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee1.EmployeeName =​​ "Anup";

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee1.EmplyeeAddress =​​ "Kolkata";

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ lstEmployee.Add(objEmployee1);

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Employee​​ objEmployee2 =​​ new​​ Employee();

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee2.ID = 2;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee2.EmployeeName =​​ "Manasi";

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee2.EmplyeeAddress =​​ "Lucknow";

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ lstEmployee.Add(objEmployee2);

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Employee​​ objEmployee3 =​​ new​​ Employee();

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee3.ID = 3;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee3.EmployeeName =​​ "Prince";

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ objEmployee3.EmplyeeAddress =​​ "Kanpur";

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ lstEmployee.Add(objEmployee3);

 

 

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ return​​ View(lstEmployee);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ [HttpGet]

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ public​​ ActionResult​​ EmployeeDetail(string​​ id,string​​ name)

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ return​​ View();

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​​​ }

}

//EmployeeInfo.cshtml

@model​​ IEnumerable<MVC_Example_using_AngularJS.Models.Employee>

 

<p>

 ​​ ​​ ​​​​ @Html.ActionLink("Create New",​​ "Create")

</p>

<table​​ class="table">

 ​​ ​​ ​​​​ <tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <th>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ @Html.DisplayNameFor(model => model.EmployeeName)

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </th>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <th>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ @Html.DisplayNameFor(model => model.EmplyeeAddress)

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </th>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <th></th>

 ​​ ​​ ​​​​ </tr>

 

@foreach​​ (var​​ item​​ in​​ Model) {

 ​​ ​​ ​​​​ <tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ @Html.DisplayFor(modelItem => item.EmployeeName)

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ @Html.DisplayFor(modelItem => item.EmplyeeAddress)

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <a​​ href="javascript:void(0)"​​ class="anchorDetails"​​ data-id="4"​​ data-name="Anup">View Tooltip</a>​​ |

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ @Html.ActionLink("Edit",​​ "Edit"​​ ) |

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ @Html.ActionLink("Details",​​ "Details",​​ new​​ { id=item.ID }) |

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ @Html.ActionLink("Delete",​​ "Delete",​​ new​​ { id=item.ID })

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​​​ </tr>

}

 

</table>

 

//EmnployeeDetail.cshtml

 

<table​​ class="webgrid">

 ​​ ​​ ​​​​ <tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Name

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Date of Birth

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Department

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​​​ </tr>

 ​​ ​​ ​​​​ <tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Mansi

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 30-10-1998

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ CS

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​​​ </tr>

 ​​ ​​ ​​​​ <tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Prince

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 21-03-1992

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ IT

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​​​ </tr>

</table>

 

//Output

Tooltip Example : Loading data dynamically based on row.

(Visited 734 times, 1 visits today)

One comment

  1. Hi

    Your article seems to be very useful to me . However, dismissal is not work…..

    can u plz suggest

Leave a Reply

Your email address will not be published. Required fields are marked *