はてなブログ記事内にも使える、超簡単ツールチップ「Balloon.css」のご紹介

ツールチップとは？

Webページのボタンやテキストの上にマウスを重ねると表示される補足説明機能のことです。

ページ内でツールチップを使用することにより、記述する文章量を抑え、見た目、説明的にスッキリさせる効果が期待できます。

ツールチップとは？

【各種実装方法】

jQuery、javascript、css 等による実装方法があります。

ネット上にサンプルコードはたくさん紹介されているので、それらを参考に自らコーディングして実現することも可能ですが、オープンソースで提供されているパッケージを利用するとその必要さえなく、一瞬でページ内への反映が可能です。

Balloon.css の紹介

Balloon.cssとは、CSSだけで実現可能なスグレモノのツールチップ用プログラムです。

【ソース提供元】

https://github.com/kazzkiq/balloon.css

↑ ソースプログラムは、Git内の上記リンク先ページから入手可能です。

【実装方法】

自身のサイト内で使用するには、以下 a. b. 2通りの方法があります。

a. Balloon.cssをダウンロード/サイト内に設置
（通常はこちらがおすすめ）

b. Balloon.cssををCDNで参照して利用
（今回当はてなブログではこちらで実現）

a. Balloon.cssをダウンロード/サイト内に設置

【手順】

1. Gitの該当ページ ( https://github.com/kazzkiq/balloon.css )より
「Downoad Zip」でプログラムを入手
→　balloon.css-master.zip　が　ダウンロードされる

2. balloon.css-master.zipをPC内の任意の場所で解凍

3. Zipファイル内から、「balloon.min.css」をコピー

4. サイト内の任意の場所に保存

5. 反映させたいサイトのHTMLページ内で「balloon.min.css」を参照するための記述を追加

記述例:

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

6. HTML内のツールチップを適用したい場所に、以下の指定された属性(いずれか)を追記

(1) ツールチップを対象の上部に表示

<button aria-label="ここを見てね" data-balloon-pos="up">ここにマウスをあてて</button>

(2) ツールチップを対象の左部に表示

<button aria-label="ここを見てね" data-balloon-pos="left">ここにマウスをあてて</button>

(3) ツールチップを対象の右部に表示

<button aria-label="ここを見てね" data-balloon-pos="right">ここにマウスをあてて</button>

(4) ツールチップを対象の下部に表示

<button aria-label="ここを見てね" data-balloon-pos="down">ここにマウスをあてて</button>

7. HTMLファイルを保存

b. Balloon.cssををCDNで参照して利用

1. 反映させたいサイトのHTMLページ内に以下を追記

<link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css">

（なお、今回ははてなブログ記事内に実装したいため、上記記述を以下に追加します）

ブログの「ダッシュボード」-> 「設定」->「詳細設定」-> 「head内タグ」->「要素にメタデータを追加」以下の入力欄内に追記します。

2. 前述 a. (6) と同じ

【ツールチップ記述例】

<p><span aria-label="ここを見てね" data-balloon-pos="up">ここにマウスをあてて</span></p>
<p><button aria-label="ここを見てね" data-balloon-pos="up">ここにマウスをあてて</button></p>
<p><button aria-label="ここを見てね" data-balloon-pos="left">ここにマウスをあてて</button></p>
<p><button aria-label="ここを見てね" data-balloon-pos="right">ここにマウスをあてて</button></p>
<p><button aria-label="ここを見てね" data-balloon-pos="down">ここにマウスをあてて</button></p>