TH 标记中工具提示的 CSS 样式

Question

我正在尝试在通过 AngularJS 传递的页面中的 jqgrid 中设置工具提示的样式。基本上在应用程序的其他地方，我使用的是 Bootstrap 工具提示样式。我正在努力让它在 AngularJS 部分工作（可能与未在正确位置运行的初始化有关）。我想我可能会改变策略并尝试模仿样式。

我已经开始并得到了一个非常粗略和准备好的样式，几乎可以作为 PoC“工作”（它需要做很多工作，但我想在做这项工作之前看看是否有可能！它在 @ 987654321@

在我尝试整理之前，我想知道是否有人可以帮助我解决 2 个问题

1) 有没有办法阻止正常的工具提示出现（我以为我在设置工具提示的样式，但我似乎要添加第二个！）

2) 有没有办法让它“浮动”。在小提琴中并不明显，但在第 th 元素更结构化（有界）的 jqgrid 中，我创建的 css 工具提示包含在第 th 元素中并且主要是隐藏的（因为它对于元素来说太大了）。

我认为这是一个 CSS 问题，而不是一个 jqgrid 问题，所以以防万一我指出我不能真正使用一些答案中发布的 span 技术。

谢谢。

小提琴中的代码是

<table>
  <th title="This is a tooltip">John</th>
  <th title="so is this">Albert</th>
  <th title="And This">Spencer</th>
</table>

th[title]:hover:after {
  content: attr(title);
  background-color: #000;
  color: #fff;
  width: 120px;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  z-index: 1;
  left: 50%;
  top: 100%;
  position: absolute;
  margin-left: -60px;
  margin-left: -5px;
  border-width: 5px;
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

Answer 1

是的。您需要做的就是从 title 属性更改为 data-title ，所以它会是：content: attr(data-title); 然后也相应地更新 th title 属性。