jQuery

デザインから選ぶjQueryツールチップ5つ



ちょっとした解説や情報を表示したい時、あらかじめデザインに当てはめておくよりも 必要な時だけに表示させる方が より目を引く場合があります。 そんな時に利用できそうなツールチップの中から使ってみたいデザインのものをピックアップしてみました :)

1:betterTooltip


枠のみが透過しているめずらしいデザイン。吹出し部分に切り込みが入っていたり メインのスペースに薄くグラデーションがかかっていたりとクオリティが非常に高いと思います!

参照元: Build a Better Tooltip with jQuery Awesomeness | Nettuts+

2:Shiny Tooltips


カラフルでおしゃれなデザイン。内側に引いてある1pxのborderや右上の反射具合が素敵なのですが、有料プラグインのようです。 デザインの参考にしよう。。

参照元: JavaScript – Shiny Tooltips – CodeCanyon

3:tipsy


THE シンプルなデザイン。すこーしだけ透過しているので下に配置しているオブジェクトが透けます。 どんなサイトやアプリにも使えそう。

参照元: tipsy

4:Digg-style-post-sharing-tool


これはすぐにでも使いたいアイディア!ツールチップの中にソーシャルボタンを置いています。 デザインもシンプルで使いやすいですね。プロフィール写真のとこに実装しようかしら。

参照元: Create a Digg-style post sharing tool with jQuery | Queness

5:Dynamic positioning of the tooltip


角丸が多いので四角いデザインのツールチップもメモ。ドロップシャドウと白いborderがポイントになっています。

参照元: Dynamic positioning of the tooltip

参考:101WebSiteDesign :: Blog 30 Stylish jQuery Tooltip Plugins For Catchy Designs はてなブックマーク - 101WebSiteDesign :: Blog 30 Stylish jQuery Tooltip Plugins For Catchy Designs

さいごに

このブログを初めてはや2ヶ月。 ログインフォームダイアログツールチップ、 と段々パーツごとのデザインまとめが揃ってきました:) そのパーツにどういったデザインが施されているのか。これを1つでも知っているのと1つも知らないのとでは デザイン力に大きく差が出ると私は思っています。

そして必要になってから探すのと、あらかじめストックしておくのとではデザインにかかる時間が大幅に違います。 Evernoteにクリップする方法もありますが、それだけでは覚えません。 こうして少しでも時間をかけて記事にすることで、1つ1つのデザインについて考える機会を得ており、 それが記憶につながるのだと思っています。

特に覚えが悪い私なので、これからも情報を得たらどんどんアップしていきますw
以上、霙でした!