css - 带有 css 的鼠标悬停工具提示未正确对齐

Question

我正在尝试使用 css 创建一个工具提示来跨越元素，但是当我将鼠标悬停时，它会为原始文本添加额外的填充。有没有办法解决这个问题？

这是代码 http://codepen.io/anon/pen/BmJqj

谢谢

Answer 1

你需要使用

• position: absolute;开span:before和span:after

和

• position: relative;上span。

像这样：

span {
    color: #333;
  text-decoration: none;
  position: relative;
}


span:hover:after{
    content: attr(data);
  dislpay: block;
  padding: .4em;
  color: #fff;
  background-color: #333;
  border-radius: .4em;
  position: absolute;
  top: 1.75em;
  left: 0;
  white-space: nowrap;
}

span:hover:before {
    display:block;
  content:"";
  position: absolute;
  border-right: .5em solid transparent;
  border-bottom: .5em solid #333;
  border-left: .5em solid transparent;
  top: 1.25em;
  left: .5em;
}

Answer 2

给它绝对位置。你现在拥有它的方式，内容作为普通内容插入：之后。因此，它处于正常流程中并转移其余部分。当你把 position:absolute 放在它上面时，你把它从流程中取出来，可以按照喜欢的方式定位它。