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

通常我们不会破坏表格格式。因此工具提示内容应位于td代码

中

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

Answer 2

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

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

如何在表行功能中的ToolTip中创建HTML内容

2 个答案: