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

Question

好吧，我知道如何做其余的，但我如何创建下面的小三角：


我不得不在Photoshop中鞭打，我一直没有找到任何可靠的指南。任何想法，将不胜感激。

Answer 1

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

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

我们都希望帮助，但有时好像我们被要求做的一切。作为开发者，我们喜欢解决问题，但是有了这样的东西，我觉得你必须要帮助自己（对不起，如果我遇到bit））

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