Html 如何单击CSS文本溢出省略号以在弹出窗口中显示长文本？

我在表格单元格里有一个很长的句子。所以我使用文本溢出来显示省略号。我的问题是如何单击点（…）以在弹出窗口中显示整个文本

  table {
      width: 100%;
      table-layout: fixed;
  }
  table td {
      border: 1px solid red;
      padding: 5px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
  }

---

当单击“切换类

显示”时

并将此代码添加到css中

table td.show{
  border: 1px solid red;
  padding: 5px;
  white-space: break-spaces;
  overflow: unset;
}

请确认此url。
在您的示例中，您已经导入了
MatTooltipModule
，为什么不使用它呢？我想知道不是使用工具提示而是使用弹出窗口。工具提示用于悬停，但我想使用“单击”。当然，如果没有办法，我会考虑工具提示。您可以禁用<代码> MatoToToP默认事件绑定行为，并将其绑定到单击。例子：