45

我为这个问题创建了一个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 来做到这一点？就像这样，但在左边

带箭头的工具提示

4

3 回答 3

59

你可以用 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>

于 2012-09-26T21:16:42.010 回答
21

我开发了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;
}
于 2012-09-26T21:14:31.947 回答
5

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

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

链接的内容

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

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

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

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

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

  2. 仅 CSS 的工具提示箭头，带有:before和:after（a跨度内的标签）

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

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

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

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

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

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

于 2012-09-26T21:22:30.130 回答