带三角形的工具提示

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

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

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;
}

Answer 3

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

\n\n

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

\n\n

链接的内容

\n\n

仅 CSS 工具提示使用:after和:before

\n\n

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

\n\n

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

\n\n

\n

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

   \n\n

   \n

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

   \n

\n

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

   \n\n

   \n

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

   \n

\n

\n\n

故障：将鼠标悬停在箭头的“边框”上时出现挥之不去的三角形。\n故障：Mozilla (Firefox)：箭头边框位于链接下方，需要更高的 z-index。

\n\n

\n
3. 最终纯 CSS 工具提示箭头，带有:beforeand :after（标记span内a）\n\n

   \n

   这个半透明 CSS 风格的翻转工具提示在 a 标签内使用了一个跨度。阴影已恢复，但具有负的上/左值以避免箭头。最后，将 alpha 透明度 (rgba) 应用于工具提示元素，并进行试错调整，将箭头的颜色混合到较低的渐变中，并降低外部三角形的（较暗的）边框颜色的可见性内在之下。

   \n

\n

\n\n

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

\n\n

遗憾的是，生成元素上的 CSS3（在本例中是淡入效果很好）过渡还没有得到足够广泛的支持（仅限 FF，但即使在那里，我也无法让它工作）。

\n