Pure CSSで様々なタイプのツールチップを表示できる「Tootik」

  • Posted on
  • Category : Tips
Pure CSSで様々なタイプのツールチップを表示できる「Tootik」

「Tootik」はツールチップを実装することができるCSSライブラリで、動きや見た目などすべてCSSで実装されています。表示位置、矢印表示の有無、カラー指定、フェード表示など用意された数種類の動きと見た目を組み合わせていく感じで、カスタムデータ属性を記述するだけで実装できる手軽さも特徴です。

Tootik

読み込む方法は「Get Started」でそれぞれ環境に応じて記述されているのでそちらを確認し、単純にlinkの場合は下記のように読み込みます。

<link rel="stylesheet" href="path/to/tootik.min.css">

使用方法はカスタムデータ属性を利用しており、下記で記述しているdata-tootikにツールチップで表示させたいテキストを記述していきます。

<span data-tootik="..."></span>

また、このライブラリにはあらかじめ動きや見た目がいくつか用意されており、それらを組み合わせることで様々なツールチップを表示できます。
それらの指定についてもカスタムデータ属性を利用し、その際は下記のようにdata-tootik-confを利用して記述していきます。

<span data-tootik="..." data-tootik-conf="..."></span>

用意されているものは大きくわけると表示位置を指定する「Position」、カラーリングを指定する「Type」、フェード表示・スクエア表示・矢印の有無選択などオプション的なものを指定する「Features」の3項目となり、それぞれ以下のようなものがあります。

Position

  • Top … 上にツールチップを表示
  • Right … 右にツールチップを表示
  • Bottom … 下にツールチップを表示
  • Left … 左にツールチップを表示

Type

※カラー名はそれぞれ見た目のカラーになります

  • Default … 黒
  • Invert … 白
  • Success … 緑
  • Info … 青
  • Warning … オレンジ
  • Danger … 赤

Features

  • Delay … 遅延表示の有無
  • No Fading … フェード表示の有無
  • Shadow … シャドウの有無
  • Multiline … 複数行対応
  • No Arrow … 矢印表示の有無
  • Square … 角丸の有無
「Playground」で各項目を組み合わせた表示を確認できる

紹介サイトにある「Usage」でもそれぞれの動きや見た目の確認ができますが、「Playground」を利用するとラジオボタンやチェックボックスになっている各項目を任意選択していき、画面右の方に表示されているPreviewにホバーすればいくつか組み合わせたときの表示確認ができます。
また、確認するだけでなく選択したものに応じて下部に実装するコードが表示されるので、それをコピペすれば試しに作った組み合わせのツールチップをすぐ実装することができます。

冒頭にもあるように動きや見た目などすべてCSSで実装されているので、もう少し表示スピードを変更したいとかカラーリングの感じを変えたいという時も容易にできると思いますし、scssも同梱されていたので編集も楽だと思います。
詳細確認やダウンロードは以下より。

Back to Top

Pure CSSで様々なタイプのツールチップを表示できる「Tootik」

Pure CSSで様々なタイプのツールチップを表示できる「Tootik」

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。