フキダシツールチップ
フキダシツールチップを表示
アニメ動作サンプル1
1. 右から左へ移動
rightとopacity(0→1)のアニメ。
2. 左から右へ移動
rightとopacity(0→1)のアニメ。
3. 右から左へ移動2
左に移動してから右に少しだけ戻るアニメ。
アニメ動作サンプル2
4. 上から下へ移動
topとopacity(0→1)のアニメ。
5. 下から上へ移動
topとopacity(0→1)のアニメ。
6. 上から下へ移動2
下に移動してから上に少しだけ戻るアニメ。
アニメ動作サンプル3
7. 回転表示(Y軸)
transformとopacityのアニメ。フキダシの三角(before)は90%からのopacityで調節。
8. 回転表示2(Y軸)
左端を支点にして回転。
9. 回転しながら表示3(Z軸)
Z軸回転と拡大のアニメ。
アニメ動作サンプル4
10. 左から右へ移動（ゆがむ）
right、opacity、transform:skewXのアニメ。
11. 上から下へ移動（バウンド）
top、opacity、transform:rotateXのアニメ。
12. 回転移動
right、opacity、transform:rotateZ skewXのアニメ。
フキダシツールチップのサンプル
フキダシツールチップなどの言葉で検索すると、「jQuery」(javascript)が必要なもの、「CSSのみ」というもののどちらかが出てくるかと思います。原森では、「CSSのみで、フキダシ文言用のspan等の余計なタグを付加しない」という条件で作成する方法を考察し、 hover & transiton ではなく animation で作るタイプを採用してサンプルをいろいろ作ってみました。
ツールチップを作る時、どんな方法で文言を記載し、どうやってそれを表示するか、という点がポイントになります。作り方はいろいろありますが、このサンプルでは dataset(カスタムデータ属性)仕様を使って文言をタグの属性として記述し、その内容を before や after で作った吹き出しに表示する、という形で作っています。
CSSのみで作成する場合、HTML5・CSS3対応ブラウザ専用、ということで作っています。
特に、web制作者を悩ます元凶になりがちな「IE6」については、セキュリティ不安があるため無視して考えています。
外部の参考記事1：
「東洋経済オンライン / マイクロソフト｢IE｣の脆弱性に世界震撼(2014年04月30日)」
外部の参考記事2：
「ITmedia ニュース / IE6を永眠させるべき10の理由(2010年03月09日)」
※2014年の記事です。
主なcssやテクニック
- data-…
- 独自データ属性(又は、カスタムデータ属性)。すべての HTML 要素に自分で設定した属性名と値を指定することができる仕様。
- content:attr(属性名)
- 属性名の値を表示
ページトップへ