css - 工具提示放置问题

Question

我有一个 CSS 工具提示设置，当鼠标悬停在链接上时它会显示在链接的右侧，并且当链接全部出现在一行时它可以正常工作。

但是，如果链接的文本太长并转到下一行，则工具提示将不再出现在最后一个单词的右侧。

这篇文章的内容部分是我所说内容的示例:http://blog.betbright.com/top-stories/premier-league-tactical-analysis-and-betting-tips-four-things-we-learnt-25th-august/

一些链接在线(正常工作)一些链接在两条线上(不工作)。

这是我的工具提示代码:

a.CTA {
  position: relative;
  display: inline;
}
a.CTA span {
  position: absolute;
  width:110px;
  color: #FFFFFF;
  background: #00A1E0;
  height: 30px;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
}
a.CTA span:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -8px;
  width: 0; height: 0;
  border-right: 8px solid #00A1E0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
a:hover.CTA span {
  visibility: visible;
  opacity: 1;
  left: 100%;
  top: 50%;
  margin-top: -15px;
  margin-left: 15px;
  z-index: 999;
}

如有任何帮助，我们将不胜感激。

谢谢， 保罗

Answer 1

这是我的做法，

    a.CTA {
  position: relative;
  display: inline;
}
a.CTA span {
  position: absolute;
  width:110px;
  color: #FFFFFF;
  background: #00A1E0;
  height: 30px;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
}
a.CTA span:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -8px;
  width: 0; height: 0;
  border-right: 8px solid #00A1E0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
a:hover.CTA span {
  visibility: visible;
  opacity: 1;
  /* left: 100%; */
  /* top: 50%; */
  margin-top: -4px;
  margin-left: 15px;
  z-index: 999;
}

我不会使用 top 和 left 属性，它们绝对定位元素。

如果您有两行，top:50% 会将工具提示定位在两行之间。

我注释掉了 top/left 并调整了 margin-top。

http://www.w3schools.com/cssref/pr_pos_top.asp

最好的

y_s_f