Question

我知道有很多示例可以自定义html元素的工具提示，但我无法使其正常工作。

我有一个简单的锚点，如下所示：

<a href="javascript:void(0)" class="tooltipItem" title="Email address that can be used to contact you." tabindex="-1" data-toggle="tooltip" data-placement="right">?</a>

然后我创建了以下css样式（我从一个例子中复制过）：

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #1111ee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #11eeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

正如你在我创造的小提琴中看到的那样，结果并不是我所期望的。

那么，我需要改变什么？

https://jsfiddle.net/Bonomi/36kp45e2/1/

Answer 1

只需将标签相对定位

即可

a[title] {
  position: relative;
}

这样你的工具提示现在对于锚标记是绝对的，而不是文档。

更新小提琴： https://jsfiddle.net/36kp45e2/2/

使用css自定义默认工具提示

1 个答案: