如何使用纯 CSS 创建“工具提示尾部”？
Posted
技术标签:
【中文标题】如何使用纯 CSS 创建“工具提示尾部”？【英文标题】：How can I create a "tooltip tail" using pure CSS? 【发布时间】：2011-08-03 03:27:55 【问题描述】：我刚刚发现了一个巧妙的 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>这会创建一个类似箭头/三角形的效果，即“工具提示尾巴”。这让我大吃一惊！ 我真的很想知道这是如何工作的？！
还有，有没有办法扩展这个 CSS 技巧来创建如下效果：
这是一个有趣的问题。这可以只使用 CSS 来完成，暂时忽略阴影吗？
更新 1
我找到了解决我最初问题的方法。这是小提琴......
http://jsfiddle.net/duZAx/7/
<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;
现在，我如何使用纯 CSS 完全模仿上面的小图片，包括阴影并使其跨浏览器兼容？
更新 2
结合以下答案，这是我的解决方案。我没有在多个浏览器上测试过它，但它在 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;
【问题讨论】：
它必须在哪些浏览器中工作？ 在这一点上我真的不在乎 :) 我只是想看看这是否可能！实际上，我会使用图片，但我对挑战很感兴趣 如果使用分层元素和像素完美的轮廓定位应该是可行的。有没有影子？ @Archimedix... 完全同意，但你能做到吗？ 这太简单了，但又太棒了，好找 Hristo！ 【参考方案1】：这是一个带有盒子阴影的例子，所有最新版本的浏览器都应该支持这个
http://jsfiddle.net/MZXCj/1/
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：
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>【讨论】：
太棒了！我有一个相当相似的解决方案，但在解释完我所做的一切之后我懒得做点什么:) +1 @mdmullinax... 史诗！当我恢复我的投票特权时，我会给你一个 +1 哇，太棒了！一个小错误：工具提示上方的阴影也有一点可见 @iuliux... 这个错误可以通过 z-index 轻松修复 :)【参考方案2】：这是回答您第一个问题的解释（我将把实际的 CSS 留给其他人，因为我很懒——请为您认为值得投票的答案投票！）：
这会创建一个类似箭头/三角形的效果，即“工具提示尾巴”。这让我大吃一惊！ 我真的很想知道这是如何工作的？！
当渲染具有不同边缘颜色但样式相同的边框时（在您的情况下，solid），分割每对相邻角的接缝是一条对角线。这与the diagram here 描述的groove、ridge、inset 和outset 边框样式非常相似。
请注意，尽管所有浏览器的行为方式都是相同的，并且从我记事起就一直如此，但这种行为在 CSS2.1 规范或 CSS 背景和边框模块中都没有完全定义。后者有一段描述color and style transitions at corners，该描述似乎暗示对于零角半径的边框，渲染的线实际上是连接填充边角和边框边角的线（导致等宽边框的 45 度角线），但规范仍然警告说，情况可能并非总是如此（特别是因为它甚至没有明确考虑零角半径的边框）。1
content (original W3C) box model 在 20 像素边框之外创建了一个 40x40 的区域，内容尺寸定义为 0x0。
用连接四个角的对角线分割一个正方形，得到四个直角三角形，它们的直角在正方形的中点相交（见下文）。
上、下、左边框为白色以匹配.tooltiptail元素容器的背景，而右边框为蓝色阴影以匹配工具提示的背景颜色：
border-color: #ffffff #a0c7ff #ffffff #ffffff;
结果是这样的，带有标签的边框，并使用我信任的线条工具添加了边框边界：
重新定位工具提示尾部只是一个简单的切换工具提示颜色的问题。例如，这将产生一个连接到尖端底部的尾巴：
border-color: #a0c7ff #ffffff #ffffff #ffffff;
jsFiddle preview
1如果您是标准合规的忠实拥护者，您不妨将这一切视为 hack。
【讨论】：
该死的快速打字，正要说同样的话...... +1 好吧，我显然不擅长阅读问题。它甚至说"I'm not worried about the shadow yet"。
@BoltClock...当我恢复我的投票特权时，我会给你一个 +1
@BoltClock，跨浏览器的行为是否一致？根据 w3c，这种行为有多标准？
@Pacerier：将角接缝渲染为对角线的具体行为在任何规范中都没有定义。但是，该行为在浏览器中是一致的，并且很长一段时间都保持不变。我会在我的回答中澄清这一点。【参考方案3】：
我只用一个div 元素来做这个工具提示。
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：
.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
解释：
就像其他示例一样，我有带边框的普通 div。尾部是 CSS 的简单组合：
我使用伪选择器 :before（:after 也可以） 我强制内容带有空白以使尾部可见。 我将框从 45 度旋转以固定工具提示侧面的角 大小和位置都不足为奇。 我在我想要的两侧添加了一个边框。 最后，我将阴影添加到外边框。【讨论】：
@Hristo For IE 我真的不知道该怎么做，但是看到一些文章：samuli.hakoniemi.net/… 但它看起来很难......“勇气！” @DoubleYo：关于 IE...如果我需要使这个 IE 兼容，我将只使用图像和条件样式表 :)【参考方案4】：没有阴影的工具提示
.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
使用 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
【讨论】：
@Archimedix... 很酷 :) 现在我知道 2 种方法可以做到这一点，如果你算上使用图像的话，还有 3 种方法。想要阴影效果吗？ @Archimedix... 看起来很棒！当我恢复我的投票特权时，我会给你一个 +1 和我的第二个解决方案一样好 - 我还设法修复了 IE6 中的一些边框透明度 - 仍然需要箭头包装器的解决方案以在 ie6 中显示边框。【参考方案5】：跨浏览器方法：
.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>这个适用于 IE7+（在 IE6 中也可以使用 (filter: chroma(color=white);)，但不会在箭头周围显示黑色边框）。
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);
这将使 IE6 呈现的难看的黑色透明度成为您在色度过滤器中指定的颜色（我做了白色，所以它在背景中消失了）。
CSS 3 方法：
您可以使用 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>
【讨论】：
@easwee...酷！！！您能否提供更多关于 css3 旋转、教程链接和其他资源的信息？ @hristo - IE 中有一个用于旋转的 dx 过滤器 - 但问题是它只需要 4 个值 - msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx @easwee... 我不太担心 IE，尤其是 IE 6。感谢您指出这一点。任何 IE 错误都可以通过条件轻松克服:) @hristo css3 旋转仅在 IE9 中受支持 - 所以您仍然需要注意 ie7-8，它仍然是编码的标准。但这是一个开始。 @easwee... 太棒了。如果我需要这样做并使其与 IE 兼容，我会使用图像和条件样式表 :) 您能否提供有关 css3 旋转、教程链接和其他资源的更多信息？【参考方案6】：您可以使用 CSS 的 :before 和 :after 伪元素。例如，:before 可用于插入三角形，:after 可用于插入矩形。这两者的结合创建了一个气泡工具提示
例如：
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;
http://www.careerbless.com/services/css/csstooltipcreator.php 提供在线工具
【讨论】：
为什么是自定义属性而不是title？
我会说aria-label 是更适合工具提示的自定义属性。使用title，您还可以获得浏览器的默认工具提示渲染（对于有视力的用户）。以上是关于如何使用纯 CSS 创建“工具提示尾部”？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用纯 CSS/JavaScript（即没有 jQuery、没有 Boostrap 等）创建可水平和垂直折叠的 HTML div？