ASP.NET Core
Demos
Support
Forum
Download
Search results

Display custom ToolTip for columns in Grid

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