Displaying text in a tool tip when text overflows its container

In several apps I work on, we use angular material to display data in a table. Sometimes, long text causes the height of the table cells to increase, resulting in an unaesthetic UI.

Using CSS, we can set the max width of the table cells, hide overflow and show ellipsis at the end of the overflowing text. When the user hovers over the long text, we can display the full content in a tooltip.

Below CSS snippet will instruct the browser to hide the overflow text and display with ellipsis.

table {
   // .... codes omitted for brevity 
    td {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 400px;
      padding: 0px 10px;
    }
  }
}

In the above snippet, setting overflow to hidden and text-overflow to ellipsis allow the browser to replace the part of the text that cannot fit within the container with ellipsis. We set white-space to nowrap to collapse the whitespaces and avoid wrapping. Otherwise, the browser will break the text to another line as necessary, increasing the height of the table cells, which we don’t want.

In our app, we only want to display tooltip on table cells which contain overflowing text, not on all table cells. Below code snippets, which I took from this stackoverflow post, check when overflow occurs in an element.

// Determines if the passed element is overflowing its bounds,
  // either vertically or…