To display custom ToolTip EJ2 Tooltip, use the
queryCellInfo
event.
Render the ToolTip component for the grid cells by using the following code in the queryCellInfo
event.
function tooltip (args) {
var tooltip = new ej.popups.Tooltip({
content: args.data[args.column.field].toString();
}, args.cell);
}
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" queryCellInfo="tooltip">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
<e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function tooltip(args) { // event triggers on every cell render.
new ej.popups.Tooltip({
content: args.data[args.column.field].toString() // add Essential JS2 tooltip for every cell.
}, args.cell);
}
</script>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}