Question

我正在尝试在通过AngularJS传递的页面中的jqgrid中设置工具提示的样式。基本上在应用程序的其他地方我使用Bootstrap工具提示样式。我正在努力让这个在AngularJS部分工作（可能与初始化没有在正确的地方运行）。我想我可能会更改大头钉并尝试模仿造型。

我已经开始并且得到了一个非常粗略和准备好的造型几乎'工作'作为PoC（它需要大量的工作buit我想看看是否有可能在做这项工作之前！它在{{ {3}}

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

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

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

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

感谢。

小提琴中的代码是

<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标签中设置工具提示的样式

1 个答案: