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

发布于 2024-10-31 08:16:01 字数 1138 浏览 1 评论 0原文

我刚刚遇到了一个巧妙的 CSS 技巧：

HTML:

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

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

}

Check out the fiddle... http://jsfiddle .net/duZAx/1/

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

此外，有没有办法扩展这个 CSS 技巧来创建如下效果...

; 在此处输入图像描述

这是一个有趣的问题。

可以只使用 CSS 而不使用阴影来完成此操作吗？
这可以通过影子来完成并使其跨浏览器兼容吗？

原文

I just came across a neat CSS trick:

HTML:

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

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

}

Check out the fiddle... http://jsfiddle.net/duZAx/1/

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...

enter image description here

This is an interesting problem.

Can this be done using only CSS, without the shadow?
Can this be done with the shadow and having it cross-browser compatible?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长发绾君心 2024-11-07 08:16:01

这是一个带有 box-shadow 的示例，所有最新版本的浏览器都应该支持此

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>

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

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>

回复收藏 0 原文

空城仅有旧梦在 2024-11-07 08:16:01

这是回答你的第一个问题的解释（我将把实际的CSS留给其他人，因为我很懒——请为你认为值得投票的他们的答案投票！）：

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

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

结果是这样的，标记了边框，并使用我值得信赖的线条工具添加了边框边界：

重新定向工具提示尾部只是切换工具提示颜色的问题。例如，这将产生附加到尖端底部的尾部：

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

jsFiddle 预览

¹ _{如果您是标准合规性的坚持者，您不妨考虑这一切黑客攻击。}

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

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 here depicts of the groove, ridge, inset and outset border 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 .tooltiptail element'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;
```

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

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

回复收藏 0 原文

〆一缕阳光ご 2024-11-07 08:16:01

我仅使用一个 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 度旋转以固定工具提示侧面的角，
大小和位置并不奇怪。
我在我想要的两侧添加边框。
最后我将阴影添加到外边框。

I do this tooltip with only one div element.

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

Explanation:

I have my normal div with border just like other example. The tail is a simple combination of 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.

回复收藏 0 原文

零時差 2024-11-07 08:16:01

没有阴影的工具提示

.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 演示

带阴影（在 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>

演示 1，演示2

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

.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

回复收藏 0 原文

初雪 2024-11-07 08:16:01

跨浏览器方法：

.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 approach:

您可以使用 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>

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

IE6 fix:

* 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).

CSS 3 approach:

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

.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>

回复收藏 0 原文

放血 2024-11-07 08:16:01

您可以使用 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

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

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

回复收藏 0 原文

~没有更多了~