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

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

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

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

Balloon.cssとは

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

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

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

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

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

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

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

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

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

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

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

balloon.min.css

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

css/balloon.min.css

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

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

CSSを読み込む

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

<link rel="stylesheet" type="text/css" href="css/balloon.min.css">

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

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/balloon.min.css">

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

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/balloon.min.css">

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

HTML要素を書く

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

<button data-balloon="上に表示" data-balloon-pos="up">マウスをのせて！</button>

<button data-balloon="左に表示" data-balloon-pos="left">マウスをのせて！</button>

<button data-balloon="右に表示" data-balloon-pos="right">マウスをのせて！</button>

<button data-balloon="下に表示" data-balloon-pos="down">マウスをのせて！</button>

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

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

ツールチップの長さ（大きさ）

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

<button data-balloon-length="small" data-balloon="スモール" data-balloon-pos="up">スモールツールチップ</button>

<button data-balloon-length="medium" data-balloon="このツールチップには、ミディアムを設定しています。" data-balloon-pos="up">ミディアムツールチップ</button>

<button data-balloon-length="large" data-balloon="さらに大きなツールチップを設定するには、largeを設定します。マウスホバーで長い説明文などを入力したいときは、ラージ以上使うのが良いかもしれません。" data-balloon-pos="up">ラージツールチップ</button>

<button data-balloon-length="xlarge" data-balloon="ラージよりさらに大きなツールチップを設定するには、xlargeを利用します。マウスホバーで長い説明文や、機能のヘルプなどを記入するときに利用すると良いかもしれません。これが最も大きなサイズです。" data-balloon-pos="up">Xラージツールチップ</button>

<button data-balloon-length="fit" data-balloon="親となるHTML要素と同じ幅にするには、fitを利用します。要素と大きさを合わせたい場合に利用すると良いかと思います。" data-balloon-pos="up">HTML要素にフィットさせる</button>

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

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

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

<button data-balloon="HTML special characters: &#9787; &#9986; &#9820;" data-balloon-pos="up">HTML特殊文字</button>

<button data-balloon="Emojis:😀 😬 😁 😂 😃 😄 😅 😆" data-balloon-pos="up">絵文字

<button class="fa" data-balloon="Font Awesome:     " data-balloon-pos="up">Font Awesome!</button>