Display Tooltip on Click cell.

[gabor]

The clipMode="EllipsisWithTooltip" which automatically displays ellipsis then full text in tooltip of cell or header text in case hoover, is really great, 

However, I would like to slightly modify this behavior to not always displaying tooltips on hoover, instead just when the user explicitly clicks on the cell or header.

I guess the solution would be some javascript on my .cshtml page, but I stuck: In case clipMode="Ellipsis" I do not know how to access and open a tooltip, clipMode="EllipsisWithTooltip" I do not know how to override the hoover behavior to click behavior...

[Manivel Sellamuthu]

Hi Gabor, 

 

Greetings from Syncfusion support. 

 

From your query, we can understand that you want to display the tooltip on clicking instead of hovering. If so you can achieve it using the below steps, 

 

Initially the Grid needs to be rendered inside the EJ2 Tooltip component, for which its target property value is set as ‘.e-headercell,.e-rowcell’(These classes are added to the Grid’s header and content cell elements respectively, so the tooltip will be displayed only on clicking both of them).  

 

We have bound beforeRender event of the tooltip, to change the content of it dynamically based on the target. Please refer the below code example and sample for more information. 

 

<ejs-tooltip id="tooltipContent" opensOn='Click' beforeOpen="toolTipBeforeOpen" target=".e-headercell,.e-rowcell" > 

    <e-content-template> 

        <ejs-grid id="Grid" dataSource="ViewBag.data" allowPaging="true"> 

            <e-grid-columns> 

                <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

                <e-grid-column field="CustomerID"  headerText="Customer ID" width="150"></e-grid-column> 

                <e-grid-column field="EmployeeID" headerText="Employee ID" width="130" textAlign="Right"></e-grid-column> 

                <e-grid-column field="ShipCity" headerText="ShipCity" width="120"></e-grid-column> 

            </e-grid-columns> 

        </ejs-grid> 

    </e-content-template> 

</ejs-tooltip> 

 

<script> 

    function toolTipBeforeOpen (args) { 

        this.content = args.target.innerText; 

    } 

</script> 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/display-tooltip-onclick895366551.zip 

 

Please let us know, if you need further assistance. 

 

Regards, 

Manivel 

[gabor]

Hi Manivel,

Many thx this is perfect!

Regards

Gabor

[Manivel Sellamuthu]

Hi Gabor, 

Thanks for your update. 

We are glad to hear that the provided suggestion helped. 

Please let us know, if you need further assistance. 

Regards, 

Manivel