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放在它上面时，你可以将它从流程中取出并按照喜欢的方式定位。

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

2 个答案: