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. クリスマスブレンド
  2. ホワイトチョコマカダミアドーナツ
  3. エッグペペ
  4. ダークチョコレート
  5. 朝のコーヒー
PAGE TOP