Display custom ToolTip for columns in Grid

17 Feb 20222 minutes to read

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;
}

CSHTML

<ejs-tooltip id="Tooltip" target=".e-rowcell" beforeRender="beforeRender">
    <e-content-template>
        <ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
            <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>
    </e-content-template>
</ejs-tooltip>

<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>

Custom-tooltip.cs

public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}