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

関連記事

  1. Flurry

    JavaScript

    Webページに雪を美しく降らせる冬にピッタリのjQueryプラグイン「Flurry」

    FlurryはWebページに雪を美しく降らせてくれるアニメーションを実…

  2. jQuery Parallax

    JavaScript

    美しいパララックススクロールエフェクトを実装できる「jQuery Parallax」

    jQuery Parallaxは美しいパララックススクロールエフェクト…

  3. no-image
  4. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

  5. jquery-backToTop

    JavaScript

    カスタマイズ性に優れたトップへ戻るボタンを実装できる「jquery-backToTop」

    jquery-backToTopはカスタマイズ性に優れた「トップへ戻る…

  6. ViewBox

    JavaScript

    レスポンシブに対応したLightbox風のイメージギャラリー「ViewBox」

    ViewBoxはレスポンシブに対応したLightbox風のイメージギャ…

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP