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 contextMenu plugin & polyfill
  2. Tikslus Carousel
  3. jQueryを使わないコード集

    JavaScript

    jQueryを使わないでコードを書くTips集

    jQueryを使えば簡単にできることがたくさんあるんですが、ちょっとし…

  4. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

  5. JavaScript

    巻き簾のようにメニューを開閉するアニメーションを実装できるjQueryプラグイン「Makisu」

    巻き簾のようにリスト化した要素を1つずつ開いていったり閉じていったりで…

  6. Parallaxor

    JavaScript

    美しいパララックス効果を最小限のコードで実装できるjQueryプラグイン「Parallaxor」

    Parallaxorは最小限のミニマルなコードで美しいパララックス効果…

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP