もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」
2011年04月11日-![はてなブックマーク](http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2011/04/tipped.html)
スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Tipped - The Javascript Tooltip Framework | jQuery & Prototype Tooltips
もう他のは要らないかも、なクールなツールチップ作成フレームワーク﹁Tipped﹂ これ1つで出回ってるであろう殆どのツールチップは作れる気がします。しかも全てハイクオリティ。
フレームワークということで以下の点をカスタマイズ可能 ・スキン ・ツールチップの位置設定︵左右上下など︶ ・コンテンツをAJAX読み込み ・ローディング画像のカスタマイズ ・コールバック機能(afterUpdate)、イベント(onHide, onShow) ・APIの提供
スクリーンショットを以下にサンプルとして掲載。 それぞれがセンスがよくてどれをつかってもよい気がします。
![](http://phpspot.net/php/webimager/admin3/data/660fa5dadf9bd7d5a656b508d91a1ff1.png)
![](http://phpspot.net/php/webimager/admin3/data/12c7957d78629475c8c3e70742d06be0.png)
![](http://phpspot.net/php/webimager/admin3/data/eb0fb9061b5788a570c3a47b845b6735.png)
![](http://phpspot.net/php/webimager/admin3/data/bb49149aaa7f3ecff68bc3baaa94a968.png)
![](http://phpspot.net/php/webimager/admin3/data/ca82bfee0506e6d87a1990cb5e5b418e.png)
![](http://phpspot.net/php/webimager/admin3/data/ba686a1d782572a7ccdca85d217a9f45.png)
矢印の位置は自由に変えられます
![](http://phpspot.net/php/webimager/admin3/data/c17f764bf1aee335eddd0904e36ab700.png)
![](http://phpspot.net/php/webimager/admin3/data/2da515522dcfa9d6bd5a72f6357ac877.png)
![](http://phpspot.net/php/webimager/admin3/data/dbde968b1a57b8f8825998a0aca2192b.png)
![](http://phpspot.net/php/webimager/admin3/data/7c53fe7394f39257aa61963f7fcbb150.png)
![](http://phpspot.net/php/webimager/admin3/data/050a196e9abfb32a5a6eae1daad9a796.png)
矢印の形も変えられます
![](http://phpspot.net/php/webimager/admin3/data/1d6db8865ab9a1ec7a8242ebf5ef0524.png)
テキストのみではなく、リッチなコンテンツも入れられます。
![](http://phpspot.net/php/webimager/admin3/data/02deaadb1b86039d42484c240fafc7f9.png)
![](http://phpspot.net/php/webimager/admin3/data/fda7b653c9d3791fa9f1ea843bdcc54f.png)
Ajaxでツールチップ内のコンテンツを読み込めるのですが、ローディングアイコンも変更可能
![](http://phpspot.net/php/webimager/admin3/data/3c1ecf3195317914209eaca346eb4523.png)
ダイアログっぽいツールチップ
![](http://phpspot.net/php/webimager/admin3/data/0ade297ef0ee52616e6c8a1c0779988a.png)
ベースとなるフレームワークにjQueryとprototypeを選べるという特徴も持ってるみたい 個人的にこうしたライブラリで決め手となるのはデザインと使う場合の柔軟性になりますが、どちらも兼ね備えてるようなので使うときはこれにしようかと思います。 関連の記事検索‥jQuery, ツールチップ
もう他のは要らないかも、なクールなツールチップ作成フレームワーク﹁Tipped﹂ これ1つで出回ってるであろう殆どのツールチップは作れる気がします。しかも全てハイクオリティ。
フレームワークということで以下の点をカスタマイズ可能 ・スキン ・ツールチップの位置設定︵左右上下など︶ ・コンテンツをAJAX読み込み ・ローディング画像のカスタマイズ ・コールバック機能(afterUpdate)、イベント(onHide, onShow) ・APIの提供
スクリーンショットを以下にサンプルとして掲載。 それぞれがセンスがよくてどれをつかってもよい気がします。
![](http://phpspot.net/php/webimager/admin3/data/660fa5dadf9bd7d5a656b508d91a1ff1.png)
![](http://phpspot.net/php/webimager/admin3/data/12c7957d78629475c8c3e70742d06be0.png)
![](http://phpspot.net/php/webimager/admin3/data/eb0fb9061b5788a570c3a47b845b6735.png)
![](http://phpspot.net/php/webimager/admin3/data/bb49149aaa7f3ecff68bc3baaa94a968.png)
![](http://phpspot.net/php/webimager/admin3/data/ca82bfee0506e6d87a1990cb5e5b418e.png)
![](http://phpspot.net/php/webimager/admin3/data/ba686a1d782572a7ccdca85d217a9f45.png)
矢印の位置は自由に変えられます
![](http://phpspot.net/php/webimager/admin3/data/c17f764bf1aee335eddd0904e36ab700.png)
![](http://phpspot.net/php/webimager/admin3/data/2da515522dcfa9d6bd5a72f6357ac877.png)
![](http://phpspot.net/php/webimager/admin3/data/dbde968b1a57b8f8825998a0aca2192b.png)
![](http://phpspot.net/php/webimager/admin3/data/7c53fe7394f39257aa61963f7fcbb150.png)
![](http://phpspot.net/php/webimager/admin3/data/050a196e9abfb32a5a6eae1daad9a796.png)
矢印の形も変えられます
![](http://phpspot.net/php/webimager/admin3/data/1d6db8865ab9a1ec7a8242ebf5ef0524.png)
テキストのみではなく、リッチなコンテンツも入れられます。
![](http://phpspot.net/php/webimager/admin3/data/02deaadb1b86039d42484c240fafc7f9.png)
![](http://phpspot.net/php/webimager/admin3/data/fda7b653c9d3791fa9f1ea843bdcc54f.png)
Ajaxでツールチップ内のコンテンツを読み込めるのですが、ローディングアイコンも変更可能
![](http://phpspot.net/php/webimager/admin3/data/3c1ecf3195317914209eaca346eb4523.png)
ダイアログっぽいツールチップ
![](http://phpspot.net/php/webimager/admin3/data/0ade297ef0ee52616e6c8a1c0779988a.png)
ベースとなるフレームワークにjQueryとprototypeを選べるという特徴も持ってるみたい 個人的にこうしたライブラリで決め手となるのはデザインと使う場合の柔軟性になりますが、どちらも兼ね備えてるようなので使うときはこれにしようかと思います。 関連の記事検索‥jQuery, ツールチップ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- SVG形式のテック系企業のロゴを簡単にゲットできる「Svgl」
- 統一感のある色味を一括生成できるツール「The good colors」
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 過去のエントリ