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. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

  2. Hover Carousel

    JavaScript

    超軽量なホバーカルーセルを実装できる「Hover Carousel」

    Hover Carouselは超軽量なホバーで動作するカルーセルを実装…

  3. jQueryプラグインのスライダー集

    JavaScript

    【jQueryプラグイン】素晴らしい機能が満載のスライダー集

    jQueryプラグインには様々な役立つ機能がありますが、中でも人気が高…

  4. no-image

    JavaScript

    円形に飛び出すメニューを実装できる「ggExpandableOptions」

    ggExpandableOptionsは円形に飛び出すメニューを実装で…

  5. jQuery Sidebar

    JavaScript

    上下左右からクイックなスライド表示させることができるjQuery Sidebar

    jQuery Sidebarは上下左右からスライド表示させることができ…

  6. JavaScript

    1つのテキストリンクから複数のリンク先が表示される「μllinx」

    μllinx(mullinx)は1つのテキストリンクから複数のリンク先…

最近の記事

  1. Hermèsオレンジスポーツバンド
  2. GoPro HERO8 Black
  3. 16インチMacBook Pro

アーカイブ

PAGE TOP