带三角形的工具提示

Question

我已为此问题创建了一个jsFiddle。

a.tip {
    position: relative;
}

a.tip span {
    display: none;
    position: absolute;
    top: -5px;
    left: 60px;
    width: 125px;
    padding: 5px;
    z-index: 100;
    background: #000;
    color: #fff;
    -moz-border-radius: 5px; /* this works only in camino/firefox */
    -webkit-border-radius: 5px; /* this is just for Safari */
}

a:hover.tip {
    font-size: 99%; /* this is just for IE */
}

a:hover.tip span {
    display: block;
}
        

<center><a href="http://google.com/" class="tip">Link!<span>Hi its me!</span></a></center>

我在我的网站上有一个工具提示，它出现在我的链接右侧。但是在黑色框的左侧，我想要一个三角形附着在框上，指向链接，是否可能仅使用CSS实现这一点？就像这样但在左边。

- adamalexanderw

---

你尝试在工具提示上放置背景图片了吗？ - Roddy of the Frozen Peas

Answer 1

您可以使用CSS通过使用CSS三角技巧来完成。

a.tip span:before{
    content:'';
    display:block;
    width:0;
    height:0;
    position:absolute;

    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right:8px solid black;
    left:-8px;

    top:7px;
}

示例演示： http://jsfiddle.net/dAutM/7/

---

实时代码段

a.tip {
  position: relative;
}

a.tip span {
  display: none;
  position: absolute;
  top: -5px;
  left: 60px;
  width: 125px;
  padding: 5px;
  z-index: 100;
  background: #000;
  color: #fff;
  -moz-border-radius: 5px;
  /* this works only in camino/firefox */
  -webkit-border-radius: 5px;
  /* this is just for Safari */
}

a.tip span:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid black;
  left: -8px;
  top: 7px;
}

a:hover.tip {
  font-size: 99%;
  /* this is just for IE */
}

a:hover.tip span {
  display: block;
}

<center><a href="http://google.com/" class="tip">Link!<span>Hi its me!</span></a></center>

- Gabriele Petrioli

---

如果你需要给三角形添加阴影，你应该使用filter: drop-shadow()。box-shadow: ()是不起作用的。请参考https://stackoverflow.com/questions/58297510/how-to-give-shadow-to-a-pointer-of-tooltip-in-html。 - Sergey Beloglazov

Answer 2

我开发了CSStooltip.com，用于在CSS中仅通过三角形创建工具提示。

示例：

span.tooltip:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-width: 10px;
      border-style: solid;
      border-color: transparent #FFFFFF transparent transparent;
      top: 11px;
      left: -24px;
}

- GG.

---

谢谢，我用了上面那个，但这仍然是一个很棒的工具！ - adamalexanderw

有没有办法在箭头和提示周围放置1像素的边框？ - user1096509

Answer 3

尝试这个：http://ecoconsulting.co.uk/examples/css-tooltip/，它解释了问题并修复了问题，允许带有边框的箭头和工具提示。

链接内容：

CSS-only工具提示使用：before和: after生成箭头。这些工具提示使用自定义的HTML5 a标签数据属性（data-tooltip）来填充工具提示，其中包含属性中的文本。箭头三角形由两个重叠元素组成，只有顶部边框可见（r-l是透明的，底部为0px）。所有工具提示文本都是链接的扩展，因此可点击。

查看源代码以获取代码-它尽可能干净，并且每个工具提示都有一个单独的css样式块-使用Arrow tooltip（final）CSS进行完成样式。不喜欢颜色？你知道该怎么做。原始灵感来自：Nicolas Gallagher的Pure CSS speech bubbles，以及模仿Addy Osmani的JQuery工具提示纯CSS。

CSS-only工具提示使用:before（没有箭头）和CSS-only工具提示箭头使用:before和:after（在span中放置a标记）。由于链接的:before属性已用于工具提示文本，因此我们需要一个额外的元素来提供进一步的生成内容。这个CSS样式化的翻转工具提示链接添加了一个箭头，该箭头由包裹链接的span上重叠的:before和:after属性组成。三角形没有宽度或高度，并且仅由边框构成，这意味着我们不能使用带有正值的box-shadow，因为它出现在透明矩形的l-r边框之外，而不是在箭头周围。

问题：悬停在箭头“边框”上时出现残留三角形。 问题：Mozilla（Firefox）：箭头边框位于链接下方，需要更高的z-index。

3. 使用:before和:after实现的最终纯CSS提示箭头（在a标签内部使用span）

   这种半透明的CSS样式提示气泡使用了a标签内部的span。影子被重现，但顶部/左侧的负值避免了箭头。为了完美收尾，将alpha透明度（rgba）应用于提示元素，并进行反复试验调整，以将箭头的颜色融入较低的渐变中，并减少内三角形下面的（更暗）边框颜色的可见性。

你可以通过应用tooltip类并将链接文本包装在span中将其添加到任何链接中。提示气泡默认继承span的font-weight值。

不幸的是，在生成的元素上使用CSS3过渡效果（在这种情况下是渐隐）的支持范围还不够广泛（仅在FF中），甚至在那里，我也无法让它正常工作。

- Dave Everitt