0

I have a component that shows a custom tooltip whether or not the text is truncated. This is a stateless component. 

const TitleComponent = ({ value }) => {

  const name = value.name;

  return(
   <div className="header">
     <span className="area">
       <Tooltip 
         value={name} 
         position={Position.bottom}>
            <span className="truncate headerTruncate">
               {name}
            </span>
       </Tooltip>
     </span>
    </div>
 );
};

So the text is truncated by the 'trancate' CSS class. And I want a way to only show the tooltip when text is truncated. How do I even know the whether or not the text is truncated in the code?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Sophonias
  • 874
  • 5
  • 16
  • 38
  • If it's truncated by CSS? You can't tell that from JS (unless, as one plugin I looked at the other day does it, you render the text into a hidden canvas to find out if it's bigger than the element you're putting it in...). – jonrsharpe Jul 23 '19 at 18:02
  • 1
    Possible duplicate of [Calculate text width with JavaScript](https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript). If you need to know if its truncated, calculate the size of the text, and the size of your container. if its too small then adjust the `display` value of your tooltip to not be `none` essentially – John Ruddell Jul 23 '19 at 18:03

1 Answers1

0

This happened to me, so I created a canvas on fly, put in the text and got the width of the canvas. Then I took width of the parent element and compared, then I handled using CSS class. Hope this helps.

Brajesh Mehra
  • 1
  • 1