ASP.NET Core
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Display custom ToolTip for columns in Grid in ASP.NET Core Grid control

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);
}
tagHelper
custom-tooltip.cs
<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();
}
Previous
Next