To display a custom ToolTip (EJ2 Tooltip), you can render the Grid control inside the Tooltip component and set the target as “.e-rowcell”. The tooltip is displayed when hovering the grid cells.
Change the tooltip content for the grid cells by using the following code in the (beforeRender) event.
function beforeRender(args) {
// event triggered before render the tooltip on target element.
var tooltip = document.getElementById("Tooltip").ej2_instances[0]
tooltip.content = args.target.closest("td").innerText;
}@Html.EJS().Tooltip("Tooltip").Target(".e-rowcell").ContentTemplate(@<div>
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).Render()
</div>).BeforeRender("beforeRender").Render()
<script>
function beforeRender(args) {
// event triggered before render the tooltip on target element.
var tooltip = document.getElementById("Tooltip").ej2_instances[0]
tooltip.content = args.target.closest("td").innerText;
}
</script>public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}