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. waslidemenu
  2. no-image

    JavaScript

    フロントエンドアプリケーションを構築するためのJSライブラリ「HyperApp」

    HyperAppは、フロントエンドアプリケーションを構築するための1K…

  3. HC Sticky

    JavaScript

    スクロールしても要素を固定できるJSライブラリ「HC Sticky」

    HC Stickyはスクロールした時に特定の要素を固定したまま表示でき…

  4. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  5. no-image

    JavaScript

    いろんなズーム機能を実装できるjQueryプラグイン「xZoom」

    xZoomはいろんなズーム機能を実装することができるカスタマイズ性に優…

  6. Impulse Slider

    JavaScript

    3Dスライダーを実装できるjQueryプラグイン「Impulse Slider」

    Impulse SliderというjQueryプラグインを使えば3Dス…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP