Tooltip

[linsee]

How do you use or define a template tooltip in each column of syncfusion's table controls?Please advise, thank you

[Venkatesh Ayothi Raman]

Hi Customer, 

Thanks for using Syncfusion products. 

We have built-in support to rendered the tooltip for corresponding columns/cell. Please refer to the following Help documentation for detailed information, 

https://help.syncfusion.com/aspnet-core/grid/cell#tooltip 

Please let us know if you have any further assistance on this. 

Regards, 

Venkatesh Ayothiraman. 

[linsee]

 Hi,Venkatesh Ayothiraman.

 Thank you for your reply.
 But that's not what I'm looking for.What I want is to show the tooltip on a cell with a table. Like this

 Thanks a lot.

[Venkatesh Ayothi Raman]

Hi Customer, 

Thanks for the update. 

We went through your screenshot that you have shared for us and we suspect that you want to rendered the Grid control inside the tooltip while hovering the particular cell. If so, we have achieved your requirement by using dataBound event and ejTooltip control. Please refer to the following code example, 

[Grid] 

<ej-grid id="DetailGrid"  databound="dataBound" 

                 allow-selection="false" 

                 allow-text-wrap="true" 

                 allow-paging="false" 

                 is-responsive="false" 

                 enable-row-hover="true" 

                 > 

          . .  . 

    <e-columns> 

        .  .  . 

    </e-columns> 

     

</ej-grid> 

 

       <script> 

            

 

           function dataBound(args) { 

               //here bound a mouseover event for grid cell  

               this.element.on("mouseover", ".e-gridcontent tr td", function (e) { 

                                      var gridObj = $("#DetailGrid").ejGrid("instance"), colLen = gridObj.model.columns.length ;//create a grid instance  

                   for (var i = 0; i < colLen; i++) { 

 

                       if (gridObj.model.columns[i].field == "EmployeeID" && i == $(e.target.closest('td')).index()) 

                       {  

                           //here rende a tooltip 

                           $(e.target).ejTooltip( 

                               { 

                                    

                                    showShadow: true, 

                                    width: "600px", 

                                    height: "350px",                                   

                                    content: '<div class="main" style="height:300px, width:400px"></div>', 

 

                               }); 

                            // render the another grid within a tooltip while hovering the cell 

                           $(".main").ejGrid({ 

                               // the datasource "window.gridData" is referred from jsondata.min.js 

                               dataSource: window.gridData, 

                               allowPaging: true,                                

                               isResponsive: true, 

                               minWidth: 700, 

                               height:200, 

                               columns: [ 

                                   . .  . 

                               ] 

                           }); 

                       } 

                   } 

                    

               }) 

           } 

            

            

            

               </script> 

In above code example, we enabled the tooltip for EmployeeID column in dataBound event. Please refer to the following Help documentation for more information, 

Help documentation: https://help.syncfusion.com/api/js/ejgrid#events:databound 

https://help.syncfusion.com/api/js/ejtooltip#members:content 

We have also prepared a sample for your convenience which can be download from following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/tooltipgrid1638620334 

Regards, 

Venkatesh Ayothiraman. 

[linsee]

Hi,Venkatesh Ayothiraman.
Thank you for your reply.I'll try it out.

[Venkatesh Ayothi Raman]

Hi Customer, 

Thanks for the update. 

We will wait to hear from you. 

Regards, 

Venkatesh Ayothiraman.