Tip

JavaScript

シンプルなUIで使いやすいツールチップ実装「Tip」

TipはシンプルなUIによる使いやすいツールチップを実装することができるjQueryプラグインです。デザインもシンプルで、ツールチップを表示させるポジションも細かく指定できるのがいいですね。

Tip

デモ

デモページには、top left、top center、top right、left、right、bottom left、bottom center、bottom righに表示されるツールチップのサンプルが用意されています。

マウスカーソルをボタンにマウスオーバーすると、ツールチップが指定された位置に表示される仕組みです。

余計な装飾もなくシンプルでスッキリしたデザインがとても見やすくていいですね。表示されるツールチップには、うっすらシャドウがかかっているので、自然な立体感が備わっています。

また、各サンプルの下には実際のコードも記述されているので、具体的にどのように実装するのかも同時にチェックできます。

セッティングできる項目には、target、tip、position、TIP_WRAP、TIP_CONTENTといったものが用意されています。カスタマイズしたい人は、ここの項目を設定してあげればOKです。

というわけで、シンプルで使いやすく、いろいろな位置に表示させることができるツールチップを実装したいという人は、ぜひ「Tip」を活用されてみてはいかがでしょうか?

Tip

number-divider.js数字を分割できるjQueryプラグイン「number-divider.js」前のページ

手軽に使えるカウントダウンタイマーを実装できる「jQuery Countdown」次のページjQuery Countdown

関連記事

  1. CoutUpCircle

    JavaScript

    カウントアップしてくれるjQueryプラグイン「CoutUpCircle」

    CoutUpCircleは目標に指定した数までカウントアップしてくれる…

  2. jQuery Seat Charts
  3. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

  4. no-image
  5. no-image

    JavaScript

    タブやアコーディオンを実装できるjQueryプラグイン「jpix」

    jpixはシンプルなタブやアコーディオンを実装することができるjQue…

  6. Responsive Sidebar Navigation

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP