Balloon.css
Simple tooltips made of pure CSS. Github Project Download CSS Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS. See how easy it is: Positioning For positioning, use data-balloon-pos attribute with one of the values: up, down, left, right, up-left, up-right, down-left or down-right.
Balloon.css
Simple tooltips made of pure CSS. Github Project Download CSS Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS. See how easy it is: Positioning For positioning, use data-balloon-pos attribute with one of the values: up, down, left, right, up-left, up-right, down-left or down-right.
Simple Hint
InstallationTo install, simply include one of simple-hint css files found in dist/ in your project: <link href="css/simple-hint.css" rel="stylesheet" />or <link href="css/simple-hint.min.css" rel="stylesheet" /> To install via Bower, run bower install simple-hint. Basic usageTo get started, use the simple-hint attribute for your text, and then specify the tooltip position by the appropriate class.
【5パターン】画像を使わず CSS3 のみで作れる吹き出しを作ってみた – Pure CSS3 Balloons | Stronghold Archive
どうもこんにちは、Honma です。今回の Tips は CSS のみで作れる吹き出しのデモです。簡単なツールチップなどにも利用できるかと思います。 CSSのみの吹き出し 5パターン×4方向 CSS は長くなるので全てデモページに記載してあります。 吹き出しの仕組み自体は :before :after 要素に三角形や円を作ることで表現しています。 Balloon 4 がうまく表示されない場合は z-index による可能性が高いので、吹き出しを囲う container の 値を 1 にするなど各自調節してみてください。 また、簡単に吹き出しを作るジェネレーター もありますので参考までに！ 以上になります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
