html - 创建一个只有 css3 的工具提示？

Question

好的，我知道如何做剩下的，但我知道如何创建下面的小三角形：


我不得不在 Photoshop 中将其制作出来，但我无法找到任何可靠的指南。任何想法，将不胜感激。

Answer 1

我必须同意上面的所有评论，一个简单的谷歌搜索将提供一个解决方案。我只是做了一个搜索，看看我发现了什么：

http://forrst.com/posts/Pure_css_tooltip_box_with_arrow_T_R_B_L-7kR

http://forrst.com/posts/Simple_pure_CSS_tooltip_with_arrow-BkY

http://cssdeck.com/item/13/pure-css-tooltip-with-arrow

我们都想帮忙，但有时感觉就像我们被要求做所有事情。作为开发人员，我们喜欢解决问题，但对于这样的事情，我觉得你确实必须帮助自己（如果我遇到讨厌的事情，抱歉）

Answer 2

我今天在TalkersCode上查看了一个教程，我认为这非常适合您的需要，这里的教程是带有演示Create CSS3 Tooltip的教程，主要代码是

<a title="Create Simple Tooltip Using CSS3" class="tooltip">Some Sample CSS3 Tooltip</a>

.tooltip
{
 display: inline;
 position: relative;
}
.tooltip:hover:after
{
 background: #333;
 background: rgba(0,0,0,.8);
 border-radius: 5px;
 bottom: 26px;
 color: #fff;
 content: attr(title);
 left: 20%;
 padding: 5px 15px;
 position: absolute;
 z-index: 98;
 width: 220px;
}

.tooltip:hover:before
{
 border: solid;
 border-color: #333 transparent;
 border-width: 6px 6px 0 6px;
 bottom: 20px;
 content: "";
 left: 50%;
 position: absolute;
 z-index: 99;
}