We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render customized Tooltip for one column which displays values of another column?

Platform: ASP.NET MVC |
Control: Grid
Tags: grid, tooltip

We may like to customize the default browser tooltip displayed in the grid columns which can be achieved using the ejTooltip control of Syncfusion.


The default tooltip of the grid columns can be customized by using cssClass property of column for which we need customized tooltip.


<script type="text/javascript">  
       $(function () {                    
                    dataSource: window.gridData,
                    allowPaging: true,
                    columns: [
                            { field: "OrderID", isPrimaryKey: true, headerText: "Order ID" },
                            { field: "CustomerID", headerText: 'Customer ID'},
                            { field: "EmployeeID", headerText: 'Employee ID', cssClass: "coltip" },
                            { field: "Freight", format: "{0:C}"  },
                            { field: "OrderDate", format: "{0:MM/dd/yyyy}" },
                            { field: "ShipCountry", headerText: "Ship Country" },
                            { field: "ShipCity", headerText: 'Ship City'}
                    dataBound: "onDataBound"                    



            .Columns(col =>
                        col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add();
                        col.Field("CustomerID").HeaderText("Customer ID").Add();
                        col.Field("EmployeeID").HeaderText("Employee ID").CssClass("coltip").Add();
                        col.Field("ShipCountry").HeaderText("Ship Country").Add();
                        col.Field("ShipCity").HeaderText("Ship City").Add();                        



<ej:Grid ID="Grid" runat="server" AllowPaging="True"> 
            <ClientSideEvents DataBound="onDataBound" />
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" />
                <ej:Column Field="CustomerID" HeaderText="Customer ID" />
                <ej:Column Field="EmployeeID" HeaderText="Employee ID" CssClass="coltip" />
                <ej:Column Field="Freight" Format="{0:C}" />
                <ej:Column Field="OrderDate" Format="{0:MM/dd/yyyy}"/>
                <ej:Column Field="ShipCountry" HeaderText="Ship Country" />
                <ej:Column Field="ShipCity" HeaderText="Ship City" />


In the dataBound event of the Grid, we need to render the ejTooltip control for the elements with class name “coltip”.

<script type="text/javascript"> 
    function onDataBound(args) { 
            width: "350px", 
            content: '<div class="main"> <div class="poster"> <img src="http://js.syncfusion.com/demos/web/images/tooltip/template-2.png" width="150px" height="120px"> </div> <div class="def"> <h4> Roslyn Succinctly </h4><div class="description">Microsoft has only recently embraced the world of open source software, offering <a href="#">More...</a> </div>'  



We can also display another column value in the customized tooltip using the beforeOpen event of the ejTooltip control.


<script type="text/template" id="test"> 
    <div id="custom">This is the customized tooltip which shows another column ie {{:ShipName}} value.</div>//customize the tooltip styles 
<script type="text/javascript"> 
    var temp = $.templates(test); 
    function onDataBound(args) { 
            width: "350px", 
            //content: 'some content' 
            beforeOpen: function (args) { 
                if ($(args.event.target).hasClass("e-headercell", "e-headercelldiv")) {
 //check if headercell is hovered 
                    args.cancel = true; 
                var gridObj = $("#Grid").data("ejGrid"); 
                var index = gridObj.getIndexByRow(args.event.target.closest("tr")); 
                var val = gridObj.getCurrentViewData()[index]; //get the row data 
                $(".coltip").ejTooltip({ content: temp.render(val) });//render the template with row data and display it as content for tooltip 



Custom tooltip

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
You must log in to leave a comment
Todd Seidel
Jan 11, 2018

This only appears to work for the first few pages of the grid.   The popup fails to open on rows further down the list even if page is turned off.   I tested under MVC with the generated grid example that uses the northwind db.   This fails even if I'm hard coding the content for the tooltip.   I'm just evaluated the tools, but not having this capability is a deal breaker.  Any ideas on how to fix this?

Also, a secondary issue when trying to display data from one of the columns in the toolbox is that the line with "args.event.target.closest" throws 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'closest'.   Other browser do not have this issue.


Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile