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. infoBox

    JavaScript

    マウスオーバーでインフォメーションボックスを表示させる「infoBox」

    infoBoxはアイコンにマウスオーバーするとインフォメーションボック…

  2. slider Menu

    JavaScript

    メニューリストをスライダーメニューにするjQueryプラグイン「slider Menu」

    slider Menuはメニューリストをスムーズにスライダーメニューに…

  3. Yamm 3

    JavaScript

    メガメニューをBootstrap3で実装する「Yamm 3」

    Yamm 3はメガメニューをBootstrap3を使って実装することが…

  4. FlexSlider

    JavaScript

    jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法

    すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探し…

  5. JavaScript

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

  6. Points Of Interest

    JavaScript

    各ポイントごとにクリックで詳細文を表示させるjQuery「Points Of Interest」

    Points Of Interestはサイト内に設置した各ポイントを…

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP