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

89

我刚刚遇到了一个简洁的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/

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

现在，如何使用纯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;
}
css  tooltip  css-shapes 
— 里斯托
source
它必须在哪些浏览器中工作？
— 2011年
1
在这一点上我并不在乎:)我只想看看这是否可能！现实地，我会使用图像，但是我对挑战很感兴趣
— Hristo
如果对轮廓使用分层元素和像素完美定位，则应该可行。有无阴影？
— 弧
@Archimedix ...完全同意，但是可以吗？
— 赫里斯特
1
这是如此简单却又如此出色，很高兴找到Hristo！
— Wesley Murch

Answers:

60

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

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

显示代码段

— 麦克
source
1
太棒了！我心中有一个非常相似的解决方案，但在解释了我所做的一切之后还是很懒惰：) +1
— BoltClock
@mdmullinax ...史诗！当我重新获得投票权时，我会给您+1
— Hristo
哇，太好了！一个小错误：在工具提示的上方也可以看到阴影
— Iulius Curt
@iuliux ...该错误可以通过z-index轻松修复：）
— Hristo
56

这是回答第一个问题的说明（由于我很懒，我会将实际的CSS留给其他人-请对他们认为值得投票的答案进行投票！）：

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

  1. 渲染具有不同边缘颜色但样式相同的边框（在您的情况下为solid）时，将每对相邻角分开的接缝为对角线。这是相当类似于此图描绘的groove，ridge，inset和outset边框样式。

    请注意，尽管所有浏览器的行为方式都相同，并且据我所知，这种行为并未在CSS2.1规范或CSS Backgrounds and Borders模块中完全定义。后者的一节描述了拐角处的颜色和样式过渡，并且该描述似乎暗示着对于拐角半径为零的边界，渲染的线实际上是将填充边的拐角与拐角的拐角相连接的线。边界边缘（导致等宽边界为45度角线），但规范仍然提醒您，情况并非总是如此（特别是因为它甚至没有明确说明角半径为零的边界）。1个

  2. 通过内容（原始W3C）盒模型，在20个像素的边框中创建了一个40x40的区域，内容尺寸定义为0x0。

  3. 用对角线将其四个角连接在一起将一个正方形划分为四个直角三角形，这些直角在正方形的中点处相交（请参见下文）。

  4. 顶部，底部和左侧边框为白色以匹配.tooltiptail元素容器的背景，而右侧边框为蓝色阴影以匹配工具提示的背景色：

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

结果就是这样，标记了边框，并使用我信任的Line Tool添加了边框：

重新调整工具提示尾巴的方向仅是切换工具提示颜色的问题。例如，这将产生一条附着在尖端底部的尾巴：

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

jsFiddle预览

1 如果您是遵守标准的忠实拥护者，则不妨将所有这些视为骇客。

— BoltClock
source
该死的快速打字，正要说相同... +1
— easwee 2011年
好吧，我显然很喜欢阅读问题。它甚至说"I'm not worried about the shadow yet"。
— 2011年
1
@BoltClock ...当我获得我的投票特权时，我会给您+1
— Hristo
@BoltClock，行为在浏览器之间是否一致？根据w3c，这种行为的标准如何？
— Pacerier，2014年
@Pacerier：在任何规范中都未定义将角缝渲染为对角线的特定行为。行为在各个浏览器中是一致的，但是很长时间以来一直保持不变。我将在回答中对此进行澄清。
— BoltClock
19

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

演示版

说明：

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

  • 我使用伪选择器：before（：after也很好）
  • 我用白色空格强制内容使尾部可见。
  • 我将盒子从45度旋转到固定在工具提示的一角
  • 尺寸和位置不足为奇。
  • 我在想要的两面都添加了边框。
  • 最后，我将阴影添加到外部边界。
— 约安
source
@Hristo对于IE，我真的不知道该怎么做，但是请参阅一些文章：samuli.hakoniemi.net / ...但是它看起来很难……“ Bon courage！”
— Yoann
@DoubleYo：关于IE ...如果需要使该IE兼容，我将只使用图像和条件样式表：）
— Hristo11
11

工具提示无阴影

显示代码段

小提琴演示

使用Shadow（在WebKit中看起来有点奇怪...我想对其进行优化）：

显示代码段

演示1，演示2

— 弧
source
@Archimedix ...很酷:)现在我知道2种方法，如果您使用图像计算的话，还有3种方法。想去阴影效果？
— 赫里斯特
@Archimedix ...看起来很棒！当我获得我的投票特权时，我会给您+1
— Hristo
与我的第二个解决方案完全一样-我也设法修复了IE6中的某些边框透明性-仍然需要一种用于箭头包装的解决方案以在ie6中显示边框。
— easwee 2011年
6

跨浏览器方法：

显示代码段

该代码可在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>
— 伊斯威
source
@easwee ...太酷了！！！您是否能够提供有关CSS3旋转的更多信息，教程的链接以及其他资源？
— 赫里斯托
@hristo -存在用于在IE中旋转的DX滤波器-但问题是，它需要仅4个值- msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx
— easwee
@easwee ...我不太担心IE，尤其是IE6。感谢您指出这一点。任何IE错误都可以轻松地通过有条件进行克服：)
— Hristo
@hristo css3旋转仅在IE9中受支持-因此，您仍然必须注意ie7-8，这仍然是编码的标准。但这是一个开始。
— easwee 2011年
@easwee ...太棒了。如果我需要这样做并使其与IE兼容，我将使用图像和条件样式表:)您是否能够提供有关css3旋转的更多信息，指向教程的链接以及其他资源？
— 赫里斯特
3

您可以使用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获得在线工具。

— 基兰
source
为什么要使用自定义属性而不是title？
— BoltClock
1
我想说这aria-label是一个更合适的工具提示自定义属性。用title，您还可以获得浏览器的默认工具提示渲染（无论如何对于可见用户而言）。
— rink.attendant.13年
谢谢。我也曾尝试使用span:before并span:after创建三角形，并根据需要从webblogsforyou.com/…进行了调整。
— immayankmodi 2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.