Tipped - The jQuery Tooltip
Tipped allows you to easily create beautiful tooltips using the jQuery Javascript library. Evolved from the popular Prototip library, Tipped takes tooltips to the next level by using HTML5 to give you full control over the look and feel of your tooltips. Canvas graphics The entire skin of the tooltip, from shadow to loading icon, is drawn using Canvas. This means that tooltip styles can easily be
スタイリッシュでカスタマイズ性のあるツールチップjQueryプラグイン「qTip」:phpspot開発日誌
qTip - The jQuery tooltip plugin - Documentation - (Current beta: 1.0.0-beta1) スタイリッシュでカスタマイズ性のあるツールチップjQueryプラグイン「qTip」。 またまた便利そうなツールチップが出てきました。 $('p').qtip({ .... }); のように呼び出すだけで、簡単にツールチップが埋め込めます。 ツールチップの表示タイミングも、show, hide オプションで指定するだけで簡単に変更可能です。 $('p#test').qtip({ content: 'hi! i am tooltip', show: 'mouseover', hide: 'mouseout' }); 吹き出しの位置も、qtip メソッドのオプションとして指定してあげれば簡単に設定可能。 カラーリングも自由自在。 何より、
"吹き出し"を画像使わずにCSSで作る方法 | エンタープライズ | マイコミジャーナル
Filament Group ツールティップとしての吹き出しエフェクトはWebページでは広く使われるようになったUIのひとつだ。吹き出しの四隅は丸みを帯びて角の外側は透過表示になり、吹き出しを示すための小さい突起がついているところに特徴がある。多くの場合で背景画像がこれらUIを実現するために使われる。 Filament Groupにおいて、これに背景画像を使わずCSSと若干のHTML、それに多少のJavaScriptを使って実現する例がImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?として紹介されている。Filament GroupではjQuery UIウィジェットの開発中にこの問題にあたり、CSSで多角形を描画するためのよく知られたトリックといくつかの工夫を凝らすことでこれを実現したと説明している。 背景画像を使わないで
ツールチップを作るのならこれかもという多機能jQueryプラグイン「Simpletip」:phpspot開発日誌
Simpletip - A simple jQuery tooltip plugin ツールチップを作るのならこれかもという多機能jQueryプラグイン「Simpletip」 色々なツールチップライブラリがありますが、Simpletipはカスタマイズ性に富んだツールチップライブラリとなっています。 基本 単純なツールチップ クリックで閉じるツールチップ ちょっとリンクが切れちゃってますが、画像なんかも埋めこみ可能。特定のHTMLを埋められるみたい。 ポジション マウスの左、右、上、下、に表示というポジショニングが可能。以下は左の例 他にもabsoluteで位置指定をしたりもできます。 エフェクト ツールチップの文字がアニメーションしつつズームイン フェードインなんかの機能もあるみたい。 関連エントリ JavaScriptを使わずCSSのみでシンプルなツールチップ実装 カスタマイズの自由度が
色んな種類のクールなツールチップを実装しよう「Prototip 2」:phpspot開発日誌
Prototip 2 - Create beautiful tooltips with ease Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework. 色んな種類のクールなツールチップを実装しよう「Prototip 2」 Prototip 2 を使えば次のようなクールなツールチップが実装できます。 カーソルをもっていくことでプレビューできます。 使い方は、必要なJS/CSSを読み込んだ後、次のように初期化するのでOKみたいで簡単 new Tip(element, 'content', { title: 'This tooltip has a title', style: 'protoblue', stem: 'topLef
利用者にメッセージを分かりやすく伝えるJavaScriptライブラリ「Window.Growl 2.0」:phpspot開発日誌
利用者にメッセージを分かりやすく伝えるJavaScriptライブラリ「Window.Growl 2.0」 2007年07月10日- Window.Growl 2.0 利用者にメッセージを分かりやすく伝えるJavaScriptライブラリ「Window.Growl 2.0」 「Window.Growl」を使えば、クリックするとフェードイン表示し、数秒後に消える、というようなメッセージボックスを簡単に実装できます。 実装コードは次のように超シンプル。 Growl.Smoke({ title: 'Window.Growl By Daniel Mota&apos', text: 'http://icebeat.bitacoras.com', image: 'growl.jpg', duration: 2 }); これはなかなか使えそうですね。 ライブラリには、mootoolsフレームワークを使用して
JavaScriptツールチップライブラリ24個:phpspot開発日誌
24 Tooltipp-Scripts | Dr. Web Weblog Tooltipps, also Mini-PopUps, beharrscht jeder halbwegs moderne Browser. JavaScriptツールチップライブラリ24個。 カーソルを合わせた際などにヒントとしてポップアップしてサイトの使い勝手を向上させることの出来るツールチップライブラリが多数紹介されています。 Unobtrusive and Slightly Accessible CSS Tool Tips on Semi Transparent CSS Menus jTip – A jQuery Tool Tip AJAX-enabled Help-Balloons Tooltipps mit CSS und Javascript qTip BoxOver SuperNotes DHTML
入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル:phpspot開発日誌
Form field hints with CSS and JavaScript (Ask the CSS Guy) My co-workers pointed out a nice effect on the Vox registration form. 入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル。 次のように、入力フォームにカーソルを合わせた時点でそのフィールドのヒントを表示できます。 フォームの入力フィールドの下に説明を書くよりも、ポップアップしてヒント表示したほうがユーザビリティ的によさそうですね。 要素の表示/非表示処理をJavaScriptによって行っていて、綺麗なHTMLによる実装が可能な点もいいです。 また、サンプルが1ファイル＋画像1枚とシンプルなので、あまりJavaScriptやCSSの知識のない方でも、ちょこっと変え
吹き出し方式のツールチップテキスト作成JavaScriptライブラリ:phpspot開発日誌
wg:Bubble Tooltips Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page. 吹き出し方式のツールチップテキスト作成JavaScriptライブラリ。 次のような吹き出し方式のツールチップテキストを作成できます。 次のようなJavascriptコードを書いておき、 <script type="text/javascript" src="BubbleTooltips.js"></script> <script type="text/javascript"> window.onload=function(){enableTooltips()}; </script> アンカー<a>タグのt
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]HTMLを汚さないで実装できる、シンプルでクールなツールチップのスクリプト -Simpletip
ちょっとした説明に便利なTooltipsのスクリプトいろいろ | IDEA*IDEA
オンラインカジノ研究所