CSSだけでツールチップを実装出来る「Balloon.css」の使い方

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

結構昔、WEBサービスを作ったときに、ツールチップを実装するのにjQueryを使ったものは利用したことがあります。

けれど、当時のものはJavaScriptを利用する必要があったりして、ちょっとややこしかった覚えがあります。

しかし最近、Balloon.cssを知って利用してみたところ、こちらはCSSだけで実装できて、とても簡単だったもので紹介です。

スポンサーリンク
レクタングル(大)広告

Balloon.cssとは

Balloon.css — CSS tooltips for HTML elements

Balloon.cssは、JavaScriptコード不要で、ツールチップをHTML要素に表示させることができるピュアCSSライブラリです。

CSSを読み込んで、要素の属性をちょこちょこっと書くだけで簡単にツールチップを実装することができます。

例えば、以下のようなツールチップを手軽に利用できます。

Balloon.cssを利用する主な手順

Balloon.cssを利用するには、以下のような手順が必要です。

  1. Balloon.cssをダウンロード&設置
  2. CSSを読み込む
  3. HTML要素を書く

単に、CSSを読み込んで、HTML要素に属性をつけて書くだけなので、かなり簡単だと思います。

Balloon.cssをダウンロード&設置

まずは、kazzkiq/balloon.cssに移動して「Download ZIP」ボタンを押してダウンロードをしてください。

GitHubからBalloon.cssをダウンロード

「balloon.css-master.zip」というファイルがダウンロードされるので、解凍してください。

それで、中にある以下のファイルを取り出します。

  • balloon.min.css

このファイルを、プロジェクトフォルダ内に以下のように設置します。

  • css/balloon.min.css

WordPressテーマに設置したとすると以下のような階層構造になります。

子テーマにBalloon.cssを設置

利用するファイルは、このCSSファイルのみと単純です。

CSSを読み込む

次に、サイトの<head></head>内で以下のようにballoon.min.cssを読み込みます。

WordPress子テーマで利用する場合は、以下のように書きます。

WordPress親テーマで利用するには以下のように書きます。

WordPressの作法に則って書くなら、wp_enqueue_style関数を利用して書いたほうが良いと思います。

HTML要素を書く

あとは、HTML要素を以下のような属性をつけて記入します。

data-balloon属性には、ツールチップで表示する文字列を記入してください。

data-balloon-pos属性には、ツールチップを表示する位置を記入します。記入する値は、up, down, left, rightの中から選択します。

ツールチップの長さ(大きさ)

data-balloon-length属性を利用することで、ツールチップの大きさも変更できます。

data-balloon-length属性には、small, medium, large, xlarge, fitから選択することができます。

絵文字やアイコンフォント

絵文字や、アイコンフォントもツールチップに表示させることができます。

まとめ

上記のように、Balloon.cssは、かなり手軽にツールチップを実装することができます。

ブログなどで利用する機会はあまりないかもしれませんが、WEBツールなどに、ちょっとした説明文を付加させるには、簡単で使いやすいCSSではないかと思います。