Tipr

JavaScript

軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」

Tiprはフラットでシンプルなツールチップを実装することができるjQueryプラグインです。ファイル容量もとても軽量なのでサクサク動作します。無駄な装飾がなくスッキリしたデザインのツールチップを表示させたい人は必見です。

Tipr

デモ

デモでは3つのテキストが縦に並んでおり、各テキストにホバーするとシンプルなツールチップが表示されます。とてもシンプルで落ち着いた印象のツールチップです。

使い方も簡単なので手軽に実装可能です。ツールチップに表示させるテキストは、HTMLのタグ内に追加する「data-tip」という属性に指定します。それと、タグには「tip」というクラス名を付与します。

また、Tiprにはオプションもいくつか用意されています。主なオプションは、speed、mode、spaceです。デフォルトの値は、speedが200、modeが’below’、spaceが70です。modeは’below’のほかに、’above’を指定することも可能です。

互換性のあるブラウザは、Chrome 32+、Microsoft Edge、IE9+、Firefox 43+、Safari 9.1+、Opera 35+。

フラットでシンプルなデザインがとてもクールなツールチップを実装したい方は、ぜひ「Tipr」をチェックしてみてください。

関連記事

  1. jsPanel3

    JavaScript

    多機能なフローティングパネルを実装できるjQueryプラグイン「jsPanel3」

    jsPanel3は、高度で多機能なフローティングパネル(ウィンドウ)を…

  2. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2012年に紹介したjQueryプラグインのまとめ

    当ブログで2012年にご紹介したjQueryプラグインをまとめてみまし…

  3. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

  4. JavaScript

    シンプル・軽量・簡単なLightBox系モーダルウィンドウのjQueryプラグイン「portBox」…

    portBoxというjQueryプラグインを使えばシンプルで軽量なLi…

  5. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

  6. rpage

    JavaScript

    Bootstrapを使ったレスポンシブなページネーション「rpage」

    rpageはBootstrapを使ったレスポンシブに対応したページネー…

最近の記事

  1. 三菱ブレッドオーブン
  2. 浜離宮恩賜庭園

アーカイブ

PAGE TOP