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」をチェックしてみてください。

infiniteSlider2.jsシンプルな操作性でカスタマイズ性にも優れたスライダー実装「infiniteSlider2.js」前のページ

グリッドベースのレスポンシブなタブを実装できるjQueryプラグイン「GridTab」次のページGridTab

関連記事

  1. jquery-calendar

    JavaScript

    レスポンシブ対応でスケジュール管理もできるカレンダー「jquery-calendar」

    jquery-calendarはレスポンシブに対応したスケジュール管理…

  2. Ideal Image Slider

    JavaScript

    シンプルで動きが滑らかなスライダー「Ideal Image Slider」

    Ideal Image Sliderはレスポンシブに対応したシンプルで…

  3. JavaScript

    シンプルなアラートを表示させることができる「smoke.js」

    smoke.jsはシンプルでカッコいいアラートを表示させることができる…

  4. Scrolla

    JavaScript

    スクロール時にアニメーションするjQueryプラグイン「Scrolla」

    Scrollaは上下スクロールしたときにアニメーションするjQuery…

  5. no-image

    JavaScript

    スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」

    bsc-sliderは、シンプルでスタイリッシュなスライダーを実装する…

  6. no-image

    JavaScript

    シンプルな円形のカラーピッカーを実装できる「jQuery-Colorwheel」

    jQuery-Colorwheelはシンプルな円形によるカラーピッカー…

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP