DarkTooltip

JavaScript

色んなパターンのツールチップを実装できるjQueryプラグイン「DarkTooltip」

DarkTooltipというjQueryプラグインを使えば、色んなパターンのツールチップを実装することができます。ホバーやクリックで表示させたり、フリップやフェードといったアニメーションをつけたりもできます。

[ads_center]

DarkTooltipの使い方

こんな感じのツールチップを実装することができます。

DarkTooltipの使い方

使い方もシンプルでいいですね。

$('#sample').darkTooltip();

個人的にとてもいいなって思ったのが便利なオプションが色々と用意されているところ。特に以下の3つがとても便利そうです。

  • size
  • gravity
  • theme

sizeはツールチップのサイズです。small、medium、largeから選ぶことができます。gravityはツールチップを表示する方向をsouth、west、north、eastの四方のいずれかを指定可能。themeはdarkとlightの2つから選択できます。

ある程度のカスタマイズはオプションだけで完結できそうですね。他にも便利なオプションがあるので、気になる方は以下から確認することができます。

DarkTooltip

CSSを使って画像にホバーするとキャプションを表示させるエフェクト前のページ

最後に更新された日付時間をショートコードで表示できるWordPressプラグイン「Last Updated Shortcode」次のページLast Updated Shortcode

関連記事

  1. ZooMove

    JavaScript

    マウスオーバーで画像を拡大ズーム・移動もできるjQueryプラグイン「ZooMove」

    ZooMoveは、マウスオーバーで指定された画像やエリアをズームするこ…

  2. Custom jQuery Lightbox

    JavaScript

    デザインや使い方がシンプルな「Custom jQuery Lightbox」

    Custom jQuery Lightboxはデザインや使い方がシンプ…

  3. no-image

    JavaScript

    手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」

    simpleParallaxは、手軽にパララックス効果を画像に実装する…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachメソッドのお勉強

    今回はjQueryのeachメソッドを使ってみました。なんかとても便利…

  5. no-image

    JavaScript

    シンプルで軽量なスクロールアニメーション実装「animateMePlz」

    animateMePlzはシンプルで軽量なスクロールアニメーションを実…

  6. Tabby

    JavaScript

    軽量でシンプルなタブメニューを実装できるjQueryプラグイン「Tabby」

    とても軽量でシンプルなタブメニューを実装できるjQueryプラグイン「…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP