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. Owl Carousel 2

    JavaScript

    美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」

    Owl Carousel 2は、美しいレスポンシブなカルーセルスライダ…

  2. no-image

    JavaScript

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

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

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

    JavaScript

    jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる

    jQueryでreplaceWithやreplaceAllを使えば好き…

  4. JavaScript

    2KB程の軽量&シンプルなjQueryスライダー「Craftyslide」を使ってみた

    とてもシンプルで軽量ないい感じのjQueryプラグイン「Craftys…

  5. Image Gallery Threejs
  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

    jQueryでHTML要素を追加するメソッドが色々あるので整理するため…

最近の記事

  1. ハムエッグホットサンドとドリップコーヒー
  2. 高輪ゲートウェイ駅のスタバ
  3. 新幹線
  4. リッチモンドホテル
  5. ハーブバターチキン 石窯フィローネとドリップコーヒー

アーカイブ

PAGE TOP