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

Question

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

我已经开始并且几乎 'working' 作为 PoC 获得了非常粗略和现成的样式（它需要大量的工作，但我想在做这项工作之前看看是否有可能！它是在Fiddle

这里

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

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

2) 有没有办法做到'float'。在 fiddle 中并不明显，但在 jqgrid 中第 th 个元素更加结构化（有界）我创建的 css 工具提示包含在第 th 个元素中并且主要隐藏（因为它太大了对于元素）。

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

谢谢。

fiddle中的代码是

<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 属性。

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

CSS Styling of a tooltip in a TH tag

css

jqgrid