javascript - 在css中的下一行重叠悬停弹出窗口

Question

我正在开发一个反应应用程序，其中我在表格中有多行并且其中一个字段文本很长，所以我有一个悬停弹出窗口，当悬停在长文本上时会显示一个弹出窗口，但它会从下一行隐藏起来，我是无法看到下一行。这是我的 CSS 和代码：

[data-title] {
      font-size: 14px;
      position: relative;
      cursor: help;
  }
    
  [data-title]:hover::before {
    content: attr(data-title);
    opacity: 1;
    position: absolute;
    margin-top:33px;
    padding: 10px;
    background: #000;
    color: #fff;
    font-size: 14px;
    width:300px;
    word-break: break-word;
    z-index:9;

  }
  [data-title]:hover::after {
      content: '';
      position: relative;
    opacity: 1;
      bottom: -12px;
      left: 8px;
      border: 8px solid transparent;    
      border-bottom: 8px solid #000;
      z-index: 9;
  }

code：

//function that renders that particular row field.

truncate = (str, n) => (str.length > n ? `${str.substr(0, n - 1)}...` : str);

messageCellDataGetter=({ rowIndex }) => <div data-title={this.props.messages[rowIndex].hl7_message}>{this.truncate(this.props.messages[rowIndex].hl7_message, 50)}</div>

任何线索将不胜感激。

标签： javascripthtmlcssreactjs