Tooltip for forms
Download script You can download the entire script from this Zip file Files included in the package: form-field-tooltip.html = Main demo HTML file js/form-field-tooltip.js = Main JS file for the script js/rounded-corners.js = JS file created to add rounded corners dynamically to the tooltip css/form-field-tooltip.css = Main CSS file for the tooltip images/* = Arrows used by teh script. Configurati
Coda Popup Bubbles | jQuery for Designers - Tutorials and screencasts
Posted on 3rd March 2008 — Coda is one of the new web development tools for the Mac – and it’s popular amongst designers and developers I know. Panic (the developers of Coda) are also known for their sharp design. Earlier: Slider Gallery Next: Image Cross Fade Transition In particular, Jorge Mesa writes to ask how to re-create their ‘puff’ popup bubble shown when you mouse over the download image.
Prototip 2 - Create beautiful tooltips with ease
Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework. Style: Easy to customize. Position: Complete control over tooltip positions. Round: Configurable rounded corners, no PNG images required. Speech bubble effect! Works on all modern browsers. = Note: This plugin is no longer actively developed, please consider moving to my latest jQuery ba
ツールチップ表示に使えるかっこいいスクリプト35 – creamu
VANDELAY DESIGNで、ツールチップ表示に使えるかっこいいスクリプトがまとまっています。 かっこいいものが揃っていますね。 Prototip 2 Prototypeを使って、シンプルなものや手の込んだツールチップを作成 Coda Popup Bubbles Codaで使われているような、ふわっと浮き上がるポップアップバブル Easiest Tooltip and Image Preview サムネイルにマウスオーバーすると、拡大画像を表示 Easy Tooltip jQuery Plugin タイトル属性をデザインしてフェードイン効果を与えられる Tooltip to Forms フォーム要素がフォーカスされたときにツールチップを表示 その他もいろいろかっこいいので、ぜひ見てみてください。 35 Useful Scripts for Tooltips 昨日はいろいろといいことがあ
「吹き出し」をツールチップとして実装するjsいろいろ
マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので
透過PNG対応！jQueryでオリジナルツールチップ (1/3)
「ツールチップ」の完成画面。左から、CSSで装飾するツールチップ、透過GIFを使ったツールチップ、透過PNGを使ったツールチップ（画像クリックでサンプルページを表示します） CSSで装飾するシンプルなツールチップ 最初に作成するのは、リンク（a要素）にマウスカーソルが重なると補足テキストをフェードインで表示する、シンプルなツールチップです。ツールチップはマウスカーソルの右下にピッタリくっ付いて表示され、マウスの動きに合わせて移動します（サンプル01）。 HTML／XHTML（以下、HTML）は以下のようになります。ツールチップを設定するリンクはa要素で通常通りマークアップします。ツールチップ内に表示する補足テキストは、a要素の後ろにspan要素で記述します。span要素には「tooltip」というclass属性を設定します。 ▼サンプル01（HTML部分） <p>Lorem （中略） qu
フレッシュなJavaScriptツールチップライブラリ等のまとめ:phpspot開発日誌
フレッシュなJavaScriptツールチップライブラリを含むツールチップライブラリが25種類まとまっているエントリのご紹介。 当サイトで紹介したことのないツールチップも含まれていましたのでご紹介。 ツールチップという完成されたと思われる分野においても様々な工夫がなされているのが分かります。 アニメーションしつつ表示される、デザインされたポップアップ フェードインアニメーションしながら表示される画像ツールチップ del.icio.usとかdigg等へ投稿するソーシャル機能付きツールチップ作成チュートリアル 角丸シャドウ付きのツールチップ 各リンク先は以下のエントリを参照してください。 25 Useful jQuery Tooltip Plugins and Tutorials : Speckyboy Design Magazine
3ステップでツールチップを作成「jQuery Simple Tooltip」
ツールチップと呼ばれるその要素に関する詳細などをヒントっぽく表示する手法があり、フォームなどに使用するとユーザビリティの向上に役立てられます。 3ステップでこのツールチップを導入できるjQuery Simple Tooltipを紹介します。 sponsors 使用方法 STEP 1 jQuery Simple Tooltipからファイルをダウンロードします。 STEP 2 以下を記述します。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.simpletooltip-min.js"></script> <script> $(function(){ $("#id名").simpletooltip(); }); </script>
簡単・軽量の吹き出しJavaScript「vTip」
リンクや画像などにマウスを乗せると吹き出しのように説明を表示するJavaScriptがあります。 これを簡単かつ軽量のJavaScriptで実現したのが、jQueryプラグインの「vTip」です。 sponsors 使用方法 vTipからファイル一式をダウンロードします。 <link href="vtip.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="vtip.js"></script> ディレクトリ構造を維持しない場合、vtip.js内で吹き出しの矢印部分の画像指定をする必要があります。 あとは以下のように記述すれば完成です。
[JS]これ最強かものツールチップスクリプト -BeautyTips
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
[JS]画像にキャプションやツールチップを自動で設定するスクリプト -Captions
Jquery Plugin MopTip 2.2 demo