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. jBox

    JavaScript

    ツールチップやモーダルウィンドウなどを実装できるjQueryプラグイン「jBox」

    jBoxはカスタマイズ性に優れたツールチップ、モーダルウィンドウ、通知…

  2. jquery-calendar

    JavaScript

    レスポンシブ対応でスケジュール管理もできるカレンダー「jquery-calendar」

    jquery-calendarはレスポンシブに対応したスケジュール管理…

  3. JavaScript

    1つのテキストリンクから複数のリンク先が表示される「μllinx」

    μllinx(mullinx)は1つのテキストリンクから複数のリンク先…

  4. JavaScript

    2KB程の軽量&シンプルなjQueryスライダー「Craftyslide」を使ってみた

    とてもシンプルで軽量ないい感じのjQueryプラグイン「Craftys…

  5. star-rating-svg

    JavaScript

    カスタマイズ性に優れたレーティング(星評価)実装「star-rating-svg」

    star-rating-svgは、SVGを使用したカスタマイズ性に優れ…

  6. kissui.scrollanim

    JavaScript

    スクロールによる多彩なアニメーションを実装できる「kissui.scrollanim」

    kissui.scrollanimは、CSS3を活用したスクロールによ…

最近の記事

  1. パニーニ(フォカッチャ ベーコンときのこのゴルゴンゾーラクリーム)とエスプレッソ
  2. 広尾 スタバ
  3. 芳醇な香りのラムレーズンサンド
  4. Aモーニングセット
  5. 白トリュフの塩パンやメロンパンなど

アーカイブ

PAGE TOP