Tipso

JavaScript

レスポンシブでアニメーションもいい感じのツールチップのjQueryプラグイン「Tipso」

Tipsoはレスポンシブに対応した軽量でアニメーションもいい感じのツールチップを実装できるjQueryプラグインです。ホバーするとツールチップはフェードで表示されます。オプションで表示する位置なども指定できるのでカスタマイズするのにもよさそうですね。

[ads_center]

Tipsoの使い方

Tipso

こんな感じでシンプルで見やすいツールチップが表示されます。

Tipso

使い方はjQuery本体、tipso.css、tipso.jsを読み込んだ上で以下のようにTipsoをコールするだけという手軽さ。

$('.sample').tipso();

もちろんオプションを駆使してカスタマイズすることも可能なので、自分のWebサイトに合わせたツールチップに近づけていくこともできます。

$('.sample').tipso({
    speed       : 400,
    background  : '#55b555',
    color       : '#ffffff',
    position    : 'top',
    width       : 200,
    delay       : 200,
    offsetX     : 0,
    offsetY     : 0,
    content     : null,
    useTitle    : true,
    onShow      : null,
    onHide      : null
});

スピード、背景、カラーなど色々なオプションが用意されています。

positionではツールチップを表示する位置を指定することができるようになっています。top、bottom、left、rightの中から好きなポジションを設定できます。

使い方も分かりやすいので、気軽にツールチップを実装したい時に役立ちそうですね。

PhotoSwipeタッチジェスチャーにも対応したイメージギャラリー・PhotoSwipe前のページ

要素の位置までスクロールしてスピード設定もできるjQueryプラグイン「scrollToBySpeed」次のページ

関連記事

  1. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

  2. JavaScript

    レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い…

    レスポンシブにも対応している人気のjQueryプラグイン「Nivo S…

  3. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  4. jquery-time-slider

    JavaScript

    時間と日付を選択できる「jquery-time-slider」

    jquery-time-sliderは時間と日付を選択できるjQuer…

  5. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP