如何在表行函数中生成ToolTip中的HTML内容

Question

我试图使工具提示显示时，徘徊在一行与大量的HTML内容在里面。这与基金会一起使用。当HTML中使用一行时，我无法获得工具提示。谢谢

HTML

<table>
  <tbody>
    <tr class="hover>
      <div class=" tooltip ">asdadasd
      </div>
      <td>nothing </td>
      <td>nothing</td>
      <td>nothing</td>
      <td>nothing</td>
      <td>nothing</td>
    </tr>
  </tbody>
</table>

或

<table>
  <tbody>
    <div class="hover">
      <tr>jhk
        <div class="tooltip">asdadasd
        </div>
        <td>nothing </td>
        <td>nothing</td>
        <td>nothing</td>
        <td>nothing</td>
        <td>nothing</td>
      </tr>
    </div>
  </tbody>
</table>

此HTML适用于它自己的JSFiddle。

<div class="hover">
  jhk
  <div class="tooltip">asdadasd
  </div>
</div>

随它而来的CSS

.hover {
  position: relative;
  top: 50px;
  left: 50px;
}

.tooltip {
  top: -10px;
  background-color: black;
  color: white;
  border-radius: 5px;
  opacity: 0;
  position: absolute;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.hover:hover .tooltip {
  opacity: 1;
}

注意:发布的css与前两个示例中的css相同。

Answer 1

通常我们不会破坏表格的格式。因此，工具提示内容应该在td标记中。

<table>
   <tr class="hover">
    <td>jhk
       <div class="tooltip">asdadasd</div>
    </td>
   </tr>
</table>

Answer 2

为每一行创建不可见的DIV。这个DIV将是你的工具提示，不管它在哪里，只要确保它不会妨碍你。

然后使用JavaScript来检测何时(和哪里)在某一行上，然后(使用JS和CSS)显示鼠标指针旁边的正确的DIV (有工具提示文本的那个)。