带有三角形的工具提示[重复]

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 来做到这一点？就像这样，但在左边

Answer 1

我开发了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;
}

Answer 2

您可以使用 CSS 来做到这一点，使用 css triangle trick

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/

---

直播sn-p

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>

Answer 3

试试这个：http://ecoconsulting.co.uk/examples/css-tooltip/

它解释了问题并修复了问题，并允许使用带边框的箭头和工具提示。

链接内容

使用 :after 和 :before 的纯 CSS 工具提示

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

查看源代码以获取代码 - 它尽可能简洁，并且每个工具提示都有一个单独的 css 样式块 - 使用箭头工具提示（最终）CSS 来完成样式。不喜欢这个颜色？你知道该做什么。原始灵感：Nicolas Gallagher's Pure CSS speech bubbles，并希望在纯 CSS 中模仿 Addy Osmani 的 JQuery 工具提示。

1. 使用 :before 的纯 CSS 工具提示（无箭头）

   此链接带有 CSS 样式的翻转工具提示，工具提示内容使用 data- 属性。您也可以使用:after 来生成工具提示。盒子阴影使它看起来漂浮在内容之上。

2. 带有 :before 和 :after 的纯 CSS 工具提示箭头（a 标记在 span 内）

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

错误：当鼠标悬停在箭头的“边界”上时，三角形挥之不去。 故障：Mozilla (Firefox)：箭头边框在链接下方，需要更高的 z-index。

1. 最终的纯 CSS 工具提示箭头，带有 :before 和 :after（span 在 a 标签内）

   这个半透明的 CSS 样式的翻转工具提示在 a 标记内使用 span。阴影已恢复，但顶部/左侧值为负数以避免箭头。最后，将 alpha 透明度 (rgba) 应用于工具提示元素，通过反复试验调整将箭头的颜色混合到较低的渐变中，并降低外部三角形的（较暗）边框颜色在内部下方的可见性.

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

遗憾的是，生成元素上的 CSS3（在这种情况下很好地淡入）过渡尚未得到足够广泛的支持（仅限 FF，但即使在那里，我也无法让它工作）。