ARIA TOOLTIP

JavaScript

WAI ARIAを活用したユーザーフレンドリーなツールチップ実装「ARIA TOOLTIP」

ARIA TOOLTIPはWAI ARIAを活用したユーザーフレンドリーなツールチップを実装できます。jQuery依存とのことです。圧縮版で6KBほどと、とても軽量なのがいいですね。WAI ARIA 1.1に準拠しています。オプションも多彩でカスタマイズ性も良好です。

多彩なポジションに対応

デモ

デモではさまざまなポジションに表示するツールチップを確認できます。テキストボックスや各ボタンにマウスオーバーすると、そこに設定されたツールチップが表示されます。

表示する位置はたくさんあり、top、right、bottom、left、topStart、bottomStart、topEnd、bottomEnd、topRight、bottomRight、topLeft、bottomLeftがあります。

それぞれのポジションにあった吹き出しもついていて、シンプルながらも細部まで抜かりないツールチップに仕上がっている印象です。

またオプションには、position、offsetX、offsetY、openClass、modifierClass、cssTransitions、responsive、fadeSpeed、zIndex、autoPositionといった項目のセッティングができます。ちなみに、positionのデフォルト値はtopになります。

シンプルで見やすく、ユーザーフレンドリーでカスタマイズ性にも優れたWAI ARIA対応のツールチップを実装したい人は、ぜひチェックしてみてはいかがでしょうか? ライセンスはMITとのこと。

ARIA TOOLTIP

関連記事

  1. ItemSlide.js

    JavaScript

    タッチやスワイプでスライドするカルーセルのjQueryプラグイン「ItemSlide.js」

    ItemSlide.jsはタッチ、スワイプ、スクロールなどでスライドす…

  2. jQueryプラグイン

    JavaScript

    jQueryプラグイン・2014年下半期70選まとめ

    今年も残すところ後わずかとなってしまいました。というわけで、2014年…

  3. Amigo Sorter Plugin

    JavaScript

    タッチ対応で直感的に並べ替えできるjQueryプラグイン「Amigo Sorter Plugin」

    Amigo Sorter Pluginは、タッチ対応で直感的にリスト項…

  4. no-image

    JavaScript

    グリッドレイアウトによるシンプルで軽量なギャラリー「Grid Gallery」

    Grid Galleryはグリッドレイアウトによるシンプルで軽量なイメ…

  5. jQuery.mousetip

    JavaScript

    マウスの動きや位置に追従してくるツールチップを実装できる「jQuery.mousetip」

    jQuery.mousetipはマウスの動きや位置に追従してくる軽量の…

  6. no-image

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP