如何在 table 行函数内的工具提示中创建 HTML 内容

Question

我试图在将鼠标悬停在包含大量 HTML 内容的行上时显示工具提示。这与 Foundation 结合使用。当在 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

通常我们不会破坏 table 格式。所以 工具提示 内容应该在 td 标签

中

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

Answer 2

为每一行创建不可见的 DIV。此 DIV 将作为您的工具提示，它位于何处并不重要，只要确保它不会挡路即可。

然后使用 JavaScript 来检测你何时（以及在哪里）在某行上，然后（使用 JS 和 CSS）显示正确的 DIV（有你的工具提示文本）在鼠标指针旁边。

如何在 table 行函数内的工具提示中创建 HTML 内容

How to make a HTML content inside ToolTip inside a table row function

html

css

tooltip

zurb-foundation