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

no-image画面が半分に割れながら切り替わる縦型スライドショー「Split Slick Slideshow」前のページ

Facebookのようなカルーセルスライダーを実装できる「jquery-carousel-slider」次のページno-image

関連記事

  1. Air Datepicker

    JavaScript

    軽量でクロスブラウザ、モダンブラウザに対応した「Air Datepicker」

    Air Datepickerは軽量でクロスブラウザ、モダンブラウザに対…

  2. Animate Transition
  3. jQuery googleslides
  4. cubeTransition.js

    JavaScript

    3Dキューブのようなスライダーを実装できる「cubeTransition.js」

    cubeTransition.jsは、CSS 3DトランスフォームとC…

  5. BookBlock Revised
  6. Responsive overlay menu

    JavaScript

    美しいオーバーレイメニューを実装できる「Responsive overlay menu」

    Responsive overlay menuはレスポンシブに対応した…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP