html - css3だけでツールチップを作成しますか？

Question

さて、私は残りの方法を知っていますが、下の小さな三角形を作成する方法を知っています。


これをフォトショップで作成する必要があり、信頼できるガイドを見つけることができませんでした。任意のアイデアをいただければ幸いです。

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

私たちは皆助けたいと思っていますが、時にはすべてをするように求められているように感じることがあります。開発者として私たちは問題を解決するのが大好きですが、このようなものでは、あなたは自分自身を助ける必要があると感じています（私が愚痴に出くわした場合は申し訳ありません）

Answer 2

私は今日TalkersCodeでチュートリアルを見ましたが、これはあなたのニーズにぴったりだと思います。チュートリアルはデモ付きのチュートリアルです。CSS3ツールチップを作成し、メインコードは

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