CSS 带三角形的工具提示

Tooltip with a triangle

提问by Awilson089

I have created a jsFiddlefor this 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>

Basically I have a tooltip on my site, and it appears to the right of my link. But on the left hand side of the black box I would like a triangle attached to the box pointing to the link, is it possible to do this using only CSS? just like this but to the left

基本上我的网站上有一个工具提示，它出现在我的链接的右侧。但是在黑框的左侧，我想要一个三角形连接到指向链接的框，是否可以仅使用 CSS 来做到这一点？就像这样但是在左边

回答by Gabriele Petrioli

You can do it with CSS, by using the css triangle trick

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

Demo athttp://jsfiddle.net/dAutM/7/

演示在http://jsfiddle.net/dAutM/7/

---

---

live snippet

现场片段

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>

回答by GG.

I developed CSStooltip.comto make tooltips with triangle in CSS only.

我开发了CSStooltip.com来制作仅在 CSS 中使用三角形的工具提示。

Example :

例子 ：

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

回答by Dave Everitt

Try this: http://ecoconsulting.co.uk/examples/css-tooltip/

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

It explains the problems and fixes the issues, and allows for an arrow and tooltip with a border.

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

Contents of the link

链接的内容

CSS-only tooltips using :afterand :before

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

These tooltip rollovers use a custom HTML5 a tag data- attribute (data-tooltip) to populate a tooltip displaying text contained in the attribute. The arrow triangle is formed by two generated overlapping elements with only the top border visible (r-l are transparent, bottom is 0px). All tooltip text is an extension of the link and therefore clickable.

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

View source to get code - it's as clean as possible, and each tooltip has a separate block of css styles—use the Arrow tooltip (final) CSS for the finished styles. Don't like the colour? You know what to do. Original inspiration: Nicolas Gallagher's Pure CSS speech bubbles, and a desire to emulate Addy Osmani's JQuery tooltip in pure CSS.

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

1. CSS-only tooltip using :before(no arrow)

   This link with a CSS-styled rollover tooltip uses a data-attribute for the tooltip content. You can also use :afterto generate the tooltip. A box-shadow makes it appear to float above the content.

2. CSS-only tooltip arrow with :beforeand :after(atag inside span)

   Since the link's :before property is already used for the tooltip text, we need an extra element to provide further generated content. This CSS-styled rollover tooltip link adds an arrow made from overlapping :before and :after properties on a span that wraps the link. The triangle has no width or height and is constructed from borders only, which means we can't use a box-shadow with positive values, as it appears outside the transparent rectangle of the l-r borders and not around the 'arrow'.

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

   此带有 CSS 样式的鼠标悬停工具提示的链接使用data-工具提示内容的属性。您还可以使用:after来生成工具提示。box-shadow 使它看起来漂浮在内容之上。

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

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

Fault: lingering triangle when hovering over arrow's 'border'. Fault: Mozilla (Firefox): arrow border is beneath link, needs higher z-index.

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

1. Final CSS-only tooltip arrow with :beforeand :after(spaninside atag)

   This translucent CSS-styled rollover tooltip uses a span inside the a tag. The shadow is reinstated but with negative top/left values to avoid the arrow. For a final touch alpha transparency (rgba) is applied to the tooltip elements, with trial-and-error tweaks to blend the arrow's colour into the lower gradient and reduce the visibility of the (darker) border colour of the outer triangle beneath the inner.

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

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

You can add it to any link by applying the tooltip class and wrapping the link text in a span. The tooltip inherits the span's font-weightvalue by default.

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

Sadly, CSS3 (in this case fade-in-nicely) transitions on generated elements aren't supported widely enough yet (FF only but even there, I couldn't get it to work).

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

回答by Vassilis Barzokas

You can put both color and image as background and also set its position . In the code below replace the image in the urltag with one that has the triangle you want.

您可以将颜色和图像都作为背景并设置其位置。在下面的代码中，将url标签中的图像替换为具有所需三角形的图像。

a.tip span {
    display: none;
    position: absolute;
    top: -5px;
    left: 60px;
    width: 125px;
    padding: 5px;
    z-index: 100;
    background: #000 url("http://www.triangle-fr.com/img/tooltip.png");
    color: #fff;
    -moz-border-radius: 5px; /* this works only in camino/firefox */
    -webkit-border-radius: 5px; /* this is just for Safari */
}

see more here http://www.w3schools.com/cssref/pr_background-position.asp

在此处查看更多信息http://www.w3schools.com/cssref/pr_background-position.asp