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

絶対位置にしてください。現在の方法では、コンテンツは通常の content:after として挿入されます。したがって、それは通常の流れにあり、残りをシフトします。これに position:absolute を付けると、フローから外して好きな位置に配置できます。