1. Home
  2. Forum
  3. Vue
  4. Tolltip is not shown in EllipsisWithTooltip mode

Tolltip is not shown in EllipsisWithTooltip mode

Hello

My column code is:

<e-column
         width="110"
         :headerText="'Executed by'"
         textAlign="Left"
         :template="userTools"
         clipMode="EllipsisWithTooltip"
></e-column>

Why can't I see tooltip on hover when there is ellipsis below?


6 Replies
RS Rajapandiyan Settu Syncfusion Team May 27, 2020 11:26 AM UTC

Hi Alex, 

Greetings from syncfusion support. 

Query : Why can't I see tooltip on hover when there is ellipsis below? 
 
We are tried to reproduce the reported behavior at our end but unable to get it. ellipsisWithTooltip is completely working fine with the template column, please refer the below sample for more information. 


If you still face  the same problem then please get back to us with the below details to validate further on this. 

  1. Share the full grid code.
  2. Share the versions of syncfusion controls you have used in package.JSON file
  3. Share the video demonstration of the reported problem.
  4. If possible share the issue reproduced sample with us.
  
Regards, 
Rajapandiyan S

AB Alex B June 3, 2020 06:18 AM UTC

Hi again.

Thanks for the reply, we investigated, that we have our custom styling in grid.
SyncFusion determines if a tooltip should be shown not by if the text actually has ellipses, but by if it would have ellipses with the standard SyncFusion font size. Our default font size is 14.4px instead of the default 14px.
So It should be possible to use custom font size. Can you give an example how to change that?

RS Rajapandiyan Settu Syncfusion Team June 4, 2020 03:07 PM UTC

Hi Alex, 

Thanks for your update. 

Query : SyncFusion determines if a tooltip should be shown not by if the text actually has ellipses, but by if it would have ellipses with the standard SyncFusion font size. 
 
In EJ2 Grid, setting the clipMode as "EllipsisWithTooltip" to a column shows a tooltip for the cell which contents width exceeds the column width. Tooltip is not depends on the fontsize of cell content. 

We have changed the font size of the content in column template and the ellipsisWithTooltip is working fine at our end. please refer the below code example and sample for more information. 


template: `<a><span v-bind:style="{ color: 'red', fontSize: '15' + 'px' }"> 
                    {{ShipCity}} 
                </span></a>`, 

  

If you still face the same problem, please get back to us with the below details. 
  1. Share the full grid code.
  2. Share the versions of syncfusion controls you have used in package.JSON file
  3. share the issue reproduced sample which is very helpful for us.

The above details are highly requested to validate further and provide the solution ASAP. 
  
Regards, 
Rajapandiyan S 


AB Alex B replied to Rajapandiyan Settu June 5, 2020 09:16 AM UTC

Hi Alex, 

Thanks for your update. 

Query : SyncFusion determines if a tooltip should be shown not by if the text actually has ellipses, but by if it would have ellipses with the standard SyncFusion font size. 
 
In EJ2 Grid, setting the clipMode as "EllipsisWithTooltip" to a column shows a tooltip for the cell which contents width exceeds the column width. Tooltip is not depends on the fontsize of cell content. 

We have changed the font size of the content in column template and the ellipsisWithTooltip is working fine at our end. please refer the below code example and sample for more information. 


                    {{ShipCity}} 
  

If you still face the same problem, please get back to us with the below details. 
  1. Share the full grid code.
  2. Share the versions of syncfusion controls you have used in package.JSON file
  3. share the issue reproduced sample which is very helpful for us.

The above details are highly requested to validate further and provide the solution ASAP. 
  
Regards, 
Rajapandiyan S 


Hi Rajapandiyan S

Thanks for the sample.
If you go to sandbox link you sent and remove the font-size style from the cell template, then add this to the style tag:

body { 
 font-size: 14px; 
} 
.e-control.e-grid { 
 width: 100% !important; font-size: inherit; 
} 
.e-control.e-grid td { 
 font-size: inherit; 
}

Our issue is reproduced.
If you make it even larger than 14px it becomes easier to see, because it happens for more letters

RS Rajapandiyan Settu Syncfusion Team June 10, 2020 11:59 AM UTC

Hi Alex, 

Thanks for your update. 

Query : SyncFusion determines if a tooltip should be shown not by if the text actually has ellipses, but by if it would have ellipses with the standard SyncFusion font size. 
 
We have confirmed that the reported behavior is an issue from our side and logged a bug for same as “EllipsisWithTooltip is not works when grid having custom font size”. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release June 24th 2020. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  


Regards, 
Rajapandiyan S 


RS Rajapandiyan Settu Syncfusion Team June 19, 2020 01:10 PM UTC

Hi Alex, 

Thanks for your patience. 

Query : SyncFusion determines if a tooltip should be shown not by if the text actually has ellipses, but by if it would have ellipses with the standard SyncFusion font size. 
 
We can resolve the problem by using the below CSS code. 


<style> 
body { 
  font-size: 18px; 
} 
.e-control.e-grid { 
  font-size: inherit; 
} 
.e-control.e-grid * { 
  font-size: inherit; 
} 
</style> 



Please get back to us if you need further assistance on this. 

Regards, 
Rajapandiyan S 


Loader.
Up arrow icon