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

Question

提问by Hristo

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 技巧来创建如下效果：

enter image description here

在此处输入图片说明

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

这是一个有趣的问题。这可以仅使用 CSS 来完成，暂时忽略阴影吗？

UPDATE 1

更新 1

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

我想出了一个解决方案来解决我最初的问题。这是小提琴...

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

HTML

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

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

更新 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/

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

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

Answer 1

采纳答案by MikeM

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

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

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>

Answer 2

回答by BoltClock

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?!

这会创建一个类似箭头/三角形的效果，即“工具提示尾部”。这让我大吃一惊！我真的很想知道这是如何工作的？！

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 heredepicts of the groove, ridge, insetand outsetborder styles.
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).¹
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.
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).
The top, bottom and left borders are white to match the background of the .tooltiptailelement's container, while the right border is a shade of blue to match the background color of the tooltip:
```
border-color: #ffffff #a0c7ff #ffffff #ffffff;
```

当渲染具有不同边缘颜色但样式相同（在您的情况下，solid）的边框时，分隔每对相邻角的接缝是一条对角线。这是相当类似于此图描绘的groove，ridge，inset和outset边框样式。
请注意，虽然所有浏览器的行为方式都相同，并且从我记事起就一直如此，但这种行为在 CSS2.1 规范或 CSS 背景和边框模块中都没有完全定义。后者有一个部分描述了拐角处的颜色和样式过渡，该描述似乎暗示对于角半径为零的边框，渲染的线条实际上是将填充边缘的拐角与边框的拐角连接起来的线条。边界边缘（导致等宽边界的 45 度角线），但规范仍然警告说，情况可能并非总是如此（特别是因为它甚至没有明确考虑零角半径的边界）。¹
通过内容（原始 W3C）框模型，在 20 个像素的边界之外创建一个 40x40 的区域，内容尺寸定义为 0x0。
用连接四个角的对角线分割正方形会产生四个直角三角形，它们的直角在正方形的中点相交（见下文）。
顶部、底部和左侧边框为白色以匹配.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.}

¹_{如果您是标准合规性的坚持者，那么您不妨将这一切视为一种黑客行为。}

Answer 3

回答by Yoann

I do this tooltip with only one divelement.

我只用一个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)
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
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.

我使用伪选择器 :before (:after 也可以正常工作)
我用空白强制内容以使尾部可见。
我将我的盒子从 45 度旋转以固定工具提示一侧的角落
尺寸和定位并不奇怪。
我在我想要的 2 边添加了一个边框。
最后我将阴影添加到外边框。

Answer 4

回答by Archimedix

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):

使用 Shadow（在 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

演示 1,演示 2

Answer 5

回答by easwee

Crossbrowser approach:

跨浏览器方法：

.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 中也使用 ( filter: chroma(color=white);)工作，但不会在箭头周围显示黑色边框）。

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 呈现的丑陋黑色透明成为您在色度过滤器中指定的颜色（我做了白色，所以它在背景中消失了）。

CSS 3 approach:CSS 3 方法：

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>

Answer 6

回答by Kiran

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 可用于插入三角形， :after 可用于插入矩形。这两者的结合创建了一个气泡工具提示

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提供了一个在线工具

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

提问by Hristo

UPDATE 1

更新 1

UPDATE 2

更新 2

采纳答案by MikeM

回答by BoltClock

回答by Yoann

回答by Archimedix

回答by easwee

回答by Kiran

相关推荐

最近更新

标签

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

提问by Hristo

UPDATE 1

更新 1

UPDATE 2

更新 2

采纳答案by MikeM

回答by BoltClock

回答by Yoann

回答by Archimedix

回答by easwee

回答by Kiran

相关推荐

CSS 页脚位置 - 底部和中心

CSS 如何将样式表附加到 AngularJS $routeProvider 中的 <head>？

CSS 在 IE9 中使 Adob​​e 字体与 CSS3 @font-face 一起使用

CSS 如何在 Bootstrap 中折叠表格行？

相关推荐

最近更新

标签

CSS 在 IE9 中使 Adobe 字体与 CSS3 @font-face 一起使用