0

I have a card with a title, an input field, and a description, I'm only showing 3 lines of description on the card and truncating if there are more. I'm also showing a tooltip saying 'click to expand' which implies if the user clicks on the card it will expand showing the complete description if the description is more than 3 lines. I want to not show the tooltip when the complete description is showing up in the default state i.e. the description is less than 3 lines. The issue is the card is responsive so is the area of the description so I can't think of a way to know when the complete description is showing up without expanding

I'm using this CSS to truncate the description

overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
Tanmay Verma
  • 21
  • 3
  • Put a resize observer on the element and if the content overflows the element add the tooltip. A walkthrough here: https://web.dev/resize-observer/ – Adam Oct 10 '22 at 09:02
  • Does this answer your question? [HTML - how can I show tooltip ONLY when ellipsis is activated](https://stackoverflow.com/questions/5474871/html-how-can-i-show-tooltip-only-when-ellipsis-is-activated) – Oke Tega Oct 10 '22 at 09:18

0 Answers0