• かちびと.net

    ツールチップのデザイン変更が容易なjQueryプラグイン・Tooltipsyのご紹介です。cssを変えるだけでスタイルを変更できます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

ツールチップのデザイン変更が容易なjQueryプラグイン・Tooltipsy

スポンサーリンク

なるほどと思ってエントリ。マウスオーバー
でツールチップを表示させるjQueryプラグ
インは沢山ありますが、表示時のデザイン
を変えるには、多少なりにライブラリの知識
を必要とする場合も多々あります。これを
非プログラマでも変更しやすくした、というもの。

Webデザイナーさん向けのjQueryプラグインのようです。Tooltipsyには以下のように書いてありました。

Tooltip plugins make it too difficult to control the CSS. So I created tooltipsy to simply provide extremely efficient tooltip functionality. Tooltipsy gives you complete control over the CSS, animation, and position.

それなりに知識がないとデザインを変更できないものばかりなので、簡単に変更できるツールチッププラグイン作ったよ!みたいな内容。

Tooltipsy


ちょっと色がアレなので長く見てると辛いですが・・cssのみで簡単にデザインを変えられる、という趣旨のプラグインです。

本体とプラグインファイルを読み込んで、下記設定をします。

$('.hastip').tooltipsy();

ここにスタイルを書けばデザインの変更ができます。

上にツールチップを出す


cssのみを書いた例。デフォルトでは上部にツールチップが出ます。

位置を指定


位置を指定するときは offset: [0, 10],といった記述を加えます。

エフェクトを変える


アニメーションのエフェクトもここで変更可能・・・ですが、ノンプログラマじゃキツイ気がしますね・・

勉強用としてもいいかも知れませんね。デモがいくつか用意されてるので色々と変更を加えてみては如何でしょう。

特にデザイン変更が容易なツールチップ系プラグインが無くはないのですが、エフェクト例も多少書いてあるので使いやすいことには違い有りませんね。何より、「簡単にしよう!」という目的でアイデアを形にするのは素敵だなぁと思いました。以下よりデモとダウンロード可能です。

Tooltipsy

URL :
TRB :

Comments & Trackbacks (3)

  1. moo

    ちょうどツールチップ系探してたのでありがたかったですヾ(*´∀`)ノわーい。

    • シロ

      おおー、それはよかったです!ヾ(*´∀`)ノわーい。

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services