ITエンジニア/デザイナ向けにオープンソースを毎日紹介

この見せ方は良いと思います。

Webサイトのコンテンツに注釈を載せたいと思うことは多いです。しかし注釈は一般的にフッターにまとめて載せるもので、クリックすると一番下まで移動してしまうのは読み手としては面倒でしょう。

そこで注釈の内容をツールチップ風に展開してくれるライブラリがBigfootになります。デザインとしてレスポンシブで、スマートフォンなどでも扱えるのが利点になります。

まず使い方としてはBigfootを読み込んだ後、注釈を出したい部分にリンクを埋め込みます。

<p>
    <sup id="fnref:1">
        <a href="#fn:1" rel="footnote">1</a>
    </sup>
</p>

そして注釈を記述します。一般的にはHTMLの下部にまとめて載せるかと思います。

<div class="footnotes"><ol>
    <li class="footnote" id="fn:1">
        <p>注釈です。<a href="#fnref:1" title="return to article"> ↩</a></p><p>
    </p></li>
</ol></div>

これで準備は完了です。後は

$.bigfoot();
を実行するだけで注釈がツールチップ表示に変わります。例えば以下はオフの場合。注釈表示になって、数字が出ているのみです。

オフの場合。
オフの場合。

それがオンにすると...という表示に変わります。

オンの場合。
オンの場合。

クリックするとツールチップ風に注釈のテキストが表示されるようになります。

クリックで表示されます。
クリックで表示されます。

アニメーションもされますのでとても分かりやすいのではないかと思います。もちろんiPhoneでも問題なく使えます。

iPhoneでの表示例。
iPhoneでの表示例。

iPhoneでクリックした場合。レスポンシブなデザインになっています。
iPhoneでクリックした場合。レスポンシブなデザインになっています。

オプションとしてマウスオーバーから外れた場合に消すか否か、ページスクロールの解除、遅延表示などが指定できます。

Bigfootはヘルプ代わりに使うこともできると思われます。JavaScriptが使えない場合は通常の注釈として表示できるのも便利です。なお注釈をフッターに集めるメリットとしては、同じ注釈の使い回しが容易という点にあるでしょう。その点においてヘルプのツールチップとの使い分けになるかと思います。

BigfootはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Bigfoot

pxldot/bigfoot

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2