如何使用纯CSS创建“工具提示尾”?

I just came across a neat CSS trick. Check out the fiddle...

我刚刚遇到了一个巧妙的CSS技巧。看看小提琴……

.tooltiptail {
  display: block;
  border-color: #ffffff #a0c7ff #ffffff #ffffff;
  border-style: solid;
  border-width: 20px;
  width: 0px;
  height: 0px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>Cool Trick:
  <br />
  <div class="tooltiptail"></div>
</div>
<br />

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

This creates a little arrow/triangle-like effect, a "tooltip tail". This blows my mind! I'm really interested in knowing how this works?!

这就产生了一个小箭头/三角形的效果，一个“工具提示尾巴”。这打击我的心灵!我真的很想知道这是怎么回事?!

Further, is there a way to extend this CSS trick to create an effect as follows:

此外，是否有一种方法可以扩展这个CSS技巧来创建如下效果:

This is an interesting problem. Can this be done using only CSS, ignoring the shadow for now?

这是一个有趣的问题。是否可以只使用CSS，暂时忽略阴影?

---

UPDATE 1

I figured out a solution to my initial question. Here's the fiddle...

我想出了一个解决我最初问题的办法。这是小提琴……

http://jsfiddle.net/duZAx/7/

http://jsfiddle.net/duZAx/7/

HTML

HTML

<div style="position: relative;">Cool Trick:<br />
    <div class="tooltiptail"></div>
    <div class="tooltiptail2"></div>
</div>

CSS

CSS

.tooltiptail {
    display: block;
    border-color: #ffffff #a0c7ff #ffffff #ffffff;
    border-style: solid;
    border-width: 20px;
    width: 0px;
    height: 0px;
}
.tooltiptail2 {
    display: block;
    border-color: transparent #ffffff transparent transparent;
    border-style: solid;
    border-width: 18px;
    width: 0px;
    height: 0px;
    position: relative;
    left: 4px;
    top: -38px;
}

Now, how do I exactly mimic the little picture above using pure CSS, including the shadow and having it cross-browser compatible?

现在，我如何使用纯CSS(包括阴影)准确地模拟上面的小图片，并让它与浏览器兼容?

---

UPDATE 2

Here's my solution after a combination of the answers below. I haven't tested it across multiple browsers, but it looks great in Chrome.

以下是我的解决方案。我还没有在多个浏览器上测试过它，但是它在Chrome上看起来很棒。

http://jsfiddle.net/UnsungHero97/MZXCj/688/

http://jsfiddle.net/UnsungHero97/MZXCj/688/

HTML

HTML

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS

CSS

#toolTip {
    background-color: #ffffff;
    border: 1px solid #73a7f0;
    width: 200px;
    height: 100px;
    margin-left: 32px;
    position:relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px -1px black;
    -moz-box-shadow: 0px 0px 8px -1px black;
    -webkit-box-shadow: 0px 0px 8px -1px black;
}

#toolTip p {
    padding:10px;
}

#tailShadow {
    background-color: transparent;
    width: 4px;
    height: 4px;
    position: absolute;
    top: 16px;
    left: -8px;
    z-index: -10;
    box-shadow: 0px 0px 8px 1px black;
    -moz-box-shadow: 0px 0px 8px 1px black;
    -webkit-box-shadow: 0px 0px 8px 1px black;
}

#tail1 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #73a7f0 transparent transparent;
    position:absolute;
    top: 8px;
    left: -20px;
}

#tail2 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #ffffff transparent transparent;
    position:absolute;
    left: -18px;
    top: 8px;
}

---

6 个解决方案

#1

Here's an example with a box-shadow, all latest version browsers should support this

这里有一个方框阴影的例子，所有最新的版本浏览器都应该支持这个

http://jsfiddle.net/MZXCj/1/

http://jsfiddle.net/MZXCj/1/

HTML:

HTML:

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS:

CSS:

body {font-family:Helvetica,Arial,sans-serif;}

#toolTip {
    position:relative;
}

#toolTip p {
    padding:10px;
    background-color:#f9f9f9;
    border:solid 1px #a0c7ff;
    -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}

#tailShadow {
    position:absolute;
    bottom:-8px;
    left:28px;
    width:0;height:0;
    border:solid 2px #fff;
    box-shadow:0 0 10px 1px #555;
}

#tail1 {
    position:absolute;
    bottom:-20px;
    left:20px;
    width:0;height:0;
    border-color:#a0c7ff transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

#tail2 {
    position:absolute;
    bottom:-18px;
    left:20px;
    width:0;height:0;
    border-color:#f9f9f9 transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

body {
  font-family: Helvetica, Arial, sans-serif;
}
#toolTip {
  position: relative;
}
#toolTip p {
  padding: 10px;
  background-color: #f9f9f9;
  border: solid 1px #a0c7ff;
  -moz-border-radius: 5px;
  -ie-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#tailShadow {
  position: absolute;
  bottom: -8px;
  left: 28px;
  width: 0;
  height: 0;
  border: solid 2px #fff;
  box-shadow: 0 0 10px 1px #555;
}
#tail1 {
  position: absolute;
  bottom: -20px;
  left: 20px;
  width: 0;
  height: 0;
  border-color: #a0c7ff transparent transparent transparent;
  border-width: 10px;
  border-style: solid;
}
#tail2 {
  position: absolute;
  bottom: -18px;
  left: 20px;
  width: 0;
  height: 0;
  border-color: #f9f9f9 transparent transparent transparent;
  border-width: 10px;
  border-style: solid;
}

<div id="toolTip">
  <p>i can haz css tooltip</p>
  <div id="tailShadow"></div>
  <div id="tail1"></div>
  <div id="tail2"></div>
</div>

#2

Here's an explanation to answer your first question (I'll leave the actual CSS to others as I'm lazy — please upvote their answers which you think deserve the votes!):

这里有一个解释来回答你的第一个问题(我将把实际的CSS留给其他人，因为我很懒——请给他们投票，你认为他们的答案是值得的!)

This creates a little arrow/triangle-like effect, a "tooltip tail". This blows my mind! I'm really interested in knowing how this works?!

这就产生了一个小箭头/三角形的效果，一个“工具提示尾巴”。这打击我的心灵!我真的很想知道这是怎么回事?!

1. When rendering a border with varying edge colors but the same style (in your case, solid), the seam dividing each pair of adjacent corners is a diagonal line. It's quite similar to what the diagram here depicts of the groove, ridge, inset and outset border styles.

   当绘制具有不同边缘颜色但样式相同(在您的示例中为solid)的边框时，将每对相邻角分割的seam是一条对角线。它非常类似于这里的图表描述的槽，脊，嵌入和开始边界风格。

   Note that while all browsers behave the same way and have done so for as long as I can remember, this behavior is not fully defined in either the CSS2.1 spec or the CSS Backgrounds and Borders module. The latter has a section describing color and style transitions at corners, and the description seems to imply that for borders with zero corner radii, the line that is rendered is in fact a line that joins the corner of the padding edge with the corner of the border edge (resulting in a 45-degree angled line for equal-width borders), but the spec still cautions that this may not always be the case (especially since it does not even account for borders with zero corner radii explicitly).¹

   请注意，虽然所有浏览器的行为方式都是相同的，而且我还记得，但是在CSS2.1规范或CSS背景和边框模块中都没有完全定义这种行为。后者有一节描述颜色和风格转换在角落,和描述似乎暗示圆角半径为零的边界,呈现实际上是一条线的线连接的角落填充边缘和边界边的角落(导致equal-width边界的45度直角线),但规范仍然警告说,这可能并不总是如此(特别是因为它甚至不考虑边界半径为零角落明确)。1

2. By the content (original W3C) box model, a 40x40 area is created out of the 20-pixel borders, with the content dimensions being defined as 0x0.

   通过content(原始的W3C) box模型，可以从20像素的边框创建一个40x40区域，内容维度定义为0x0。

3. Dividing a square with diagonal lines joining its four corners results in four right triangles whose right angles meet at the square's midpoint (see below).

   将正方形与其四角的对角线分割成四个直角三角形，它们的直角在正方形的中点处相交(见下文)。

4. The top, bottom and left borders are white to match the background of the .tooltiptail element's container, while the right border is a shade of blue to match the background color of the tooltip:

   顶部、底部和左侧边框均为白色，以匹配.tooltiptail元素容器的背景，而右侧边框为蓝色，以匹配工具提示的背景颜色:

   border-color: #ffffff #a0c7ff #ffffff #ffffff;
   

The result is this, with the borders labeled, and the border boundaries added using my trusty Line Tool:

结果是这样的，有边界标签，边界边界用我信任的线工具增加:

Reorienting the tooltip tail is simply a matter of switching the tooltip color around. For example, this would yield a tail that's attached to the bottom of a tip:

重新确定工具提示尾的方向仅仅是改变工具提示颜色的问题。例如，这将会产生一个附在顶端底部的尾巴:

border-color: #a0c7ff #ffffff #ffffff #ffffff;

jsFiddle preview

jsFiddle预览

---

¹_{If you're a stickler for standards compliance, you may as well consider all this a hack.}

如果你是一个严格遵守标准的人，你不妨把这一切都看作是一个黑客。

#3

I do this tooltip with only one div element.

我只使用一个div元素来完成这个工具提示。

HTML:

HTML:

<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent augue justo, venenatis non tincidunt sit amet, suscipit eget ligula.</div>

CSS:

CSS:

.tooltip{
    position: relative;
    border: 1px solid #73a7f0;
    width: 200px;
    margin-left: 20px;
    padding: 5px 14px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
    -webkit-box-shadow: -0px 0px 6px rgba(0, 0, 0, .7);
    -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
}
.tooltip:before{
    content: ' ';
    display: block;
    position: absolute;
    left: -8px;
    top: 15px;
    width: 14px;
    height: 14px;
    border-color: #73a7f0;
    border-width: 1px;
    border-style: none none solid solid;
    background-color: #fff;
    box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    -webkit-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    -moz-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

Demo

演示

Explanation:

解释:

I have my normal div with border just like other example. The tail is a simple combination of CSS :

和其他例子一样，我有带边框的普通div。尾巴是CSS的简单组合:

• I use the pseudo selector :before (:after works fine too)
• 我使用伪选择器:before (:after work fine)
• I force the content with a white space to make the tail visible.
• 我用一个白色的空格使内容可见。
• I rotate my box from 45deg to fix the corner in the side of the tooltip
• 我将我的盒子从45deg旋转到工具提示的角落
• No surprise for the size and the positioning.
• 尺寸和定位都不足为奇。
• I add a border on the 2 sides i want.
• 我想在两边加一个边框。
• And finally i add the shadows to the outside border.
• 最后我把阴影添加到外部边界。

#4

Tooltip without shadow

提示没有影子

.abubble {
  position: relative;
  border: 1px solid #a0c7ff;
  width: 100px;
  height: 100px;
}
.ashadow {
  position: absolute;
  display: inline-block;
  background: transparent;
  width: 10px;
  height: 10px;
  left: 50px;
  top: 100px;
  -moz-box-shadow: 0px 10px 30px #000;
  -webkit-box-shadow: 0px 10px 30px #000;
  box-shadow: 0px 10px 30px #000;
}
.atail {
  position: absolute;
  display: inline-block;
  border-width: 20px;
  border-style: solid;
  border-color: #a0c7ff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: 30px;
  top: 100px;
}
.atail2 {
  position: relative;
  display: inline-block;
  border-width: 19px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: -19px;
  top: -20px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

<div class="abubble">
  <div class="atail">
    <div class="atail2">
    </div>
  </div>
</div>

Fiddle Demo

小提琴演示

---

With Shadow (looks bit weird in WebKit... gotta optimize it I guess):

使用阴影(在WebKit中看起来有点奇怪……)我想要优化它):

.abubble {
  position: relative;
  border: 1px solid #a0c7ff;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.ashadow {
  position: absolute;
  display: inline-block;
  background: transparent;
  width: 10px;
  height: 10px;
  left: -5px;
  top: -16px;
  -moz-box-shadow: 0px 10px 20px #000;
  -webkit-box-shadow: 0px 10px 20px #000;
  box-shadow: 0px 10px 20px #000;
}
.atail {
  position: absolute;
  display: inline-block;
  border-width: 20px;
  border-style: solid;
  border-color: #a0c7ff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: 30px;
  top: 100px;
}
.atail2 {
  position: relative;
  display: inline-block;
  border-width: 19px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: -19px;
  top: -20px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

<div class="abubble">
  <div class="atail">
    <div class="ashadow"></div>
    <div class="atail2">
    </div>
  </div>
</div>

Demo 1, Demo 2

演示,演示2

#5

Crossbrowser approach:

Crossbrowser方法:

.tooltip {
  position:relative;
  padding:10px;
  border-bottom:1px solid #000;
  background:#ccc;
}

.arrow {
    background:transparent;
    display:inline-block;
    position:absolute;
    bottom:-20px;
    border-left:10px solid transparent;
    border-bottom:10px solid transparent;
    border-top:10px solid #000;
    border-right:10px solid transparent; 
}
.arrow i {
    display:inline-block;
    position:absolute;
    top:-10px;
    left:-9px;
    width:0;
    height:0;
    border-left:9px solid transparent;
    border-bottom:9px solid transparent;
    border-top:9px solid #ccc;
    border-right:9px solid transparent;
}
* html .arrow {
    border-bottom-color:white;
    border-left-color:white;
    border-right-color:white;
    filter: chroma(color=white);
}
* html .arrow i {
    border-bottom-color:white;
    border-left-color:white;
    border-right-color:white;
    filter: chroma(color=white);
}

<div class="tooltip">
    <span class="arrow"><i></i></span>
    Tooltip text that wants to be your friend.
</div>

This one works from IE7+ (works in IE6 using (filter: chroma(color=white);) too but won't display the black border around the arrow).

这款应用于IE7+(在IE6中也可以使用(过滤器:chroma(颜色=白色);)，但不会显示箭头周围的黑色边框)。

IE6 fix:

IE6解决办法:

* html .arrow {
        border-bottom-color:white;
        border-left-color:white;
        border-right-color:white;
        filter: chroma(color=white);

}
* html .arrow i
        {
        border-bottom-color:white;
        border-left-color:white;
        border-right-color:white;
        filter: chroma(color=white);
        }

This will make the ugly black transparecy that is rendered by IE6 the color you specified in chroma filter (I did white so it disappears in background).

这将使由IE6呈现的丑陋的黑色变得透明，即你在chroma filter中指定的颜色(我使用了白色，所以它在背景中消失了)。

---

CSS 3 approach:

You could do it with CSS3 rotation, but will fail in non CSS3 compliant browsers:

你可以用CSS3旋转来做，但是在不兼容CSS3的浏览器中会失败:

.tooltip {
    position:relative;
    padding:10px;
    background:#ccc;
    border-bottom:1px solid #000;
}
.tooltip:before {
    content:"";
    display:block;
    width:10px;
    height:10px;
    position:absolute;
    bottom:-6px;
    border-left:1px solid #000;
    border-bottom:1px solid #000;
    background:#ccc;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

<div class="tooltip"> 
    Tooltip text that wants to be your friend.
</div>

#6

You can make use of the :before and :after pseudo-elements of CSS. FOr instance, :before can be used to insert a triangle and :after to insert a rectangle. The combination of these two creates a bubble tool tip

您可以使用CSS的伪元素:before和:after。例如，:before可以用来插入一个三角形和:在插入一个矩形之后。这两者的结合创造了一个气泡工具提示

Eg :

例如:

a[bubbletooltip]:before
{
    content: "";
    position: absolute;
    border-bottom: 21px solid #e0afe0;
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    visibility: hidden;
    bottom: -20px;
    left: -12px;
}

a[bubbletooltip]:after
{
    position: absolute;
    content: attr(bubbletooltip);
    color: #FFF;
    font-weight:bold;
    bottom: -35px;
    left: -26px;
    white-space: nowrap;
    background: #e0afe0;
    padding: 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius: 6px;
    visibility: hidden;
}

An online tool is available at http://www.careerbless.com/services/css/csstooltipcreator.php

可以在http://www.careerbless.com/services/css/csstooltipcreator.php中找到在线工具。