もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」:phpspot開発日誌
もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 2011年04月11日- Tipped - The Javascript Tooltip Framework | jQuery & Prototype Tooltips もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 これ１つで出回ってるであろう殆どのツールチップは作れる気がします。しかも全てハイクオリティ。 フレームワークということで以下の点をカスタマイズ可能 ・スキン ・ツールチップの位置設定（左右上下など） ・コンテンツをAJAX読み込み ・ローディング画像のカスタマイズ ・コールバック機能(afterUpdate)、イベント(onHide, onShow) ・APIの提供 スクリーンショットを以下にサンプルとして掲載。 それぞれがセンスがよくてどれをつかってもよい気が
CSS のみで吹き出し
hail2u.net - Weblog - Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="bubble"> <p class="body">Speech!</p> </div> CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例: .bubble { float: left; /* または position: absolute; */ border-left: 10px solid black; border-bottom
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
透過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で
利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」:phpspot開発日誌
Notimo Demos site 利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」。 次のリンクをクリックしてみてください。 → 通知を表示してみる ページの右上にフェードインで表示するのはなかなかインパクトが大きいですね。 スクロールしても、いやみではない感じにちゃんとついてきてくれます。 使い方もかなり簡単で、必要なJSとCSSを読み込んだ後、インスタンスをnewして show メソッドを呼び出すだけです。 showは２回連続で呼び出しても、ちゃんと１個目と区別して表示してくれます。 <script type="text/javascript"> var notimooManager = new Notimoo(); // 通知を表示 notimooManager.show({ title: 'タイトル', message: 'メッセージ
スタイリッシュでカスタマイズ性のあるツールチップ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 メソッドのオプションとして指定してあげれば簡単に設定可能。 カラーリングも自由自在。 何より、
Ajaxで吹き出し方式のテキストヒント作成ライブラリ:phpspot開発日誌
Ajax tooltip This is an Ajax tooltip script. When you roll your mouse over the "info" links in the table, ajax will show tooltip content from external files. Ajaxで吹き出し方式のテキストヒント作成ライブラリ。 使い方は、必要なCSSとJavaScriptをインクルードして次のようにアンカーのonmouseover/onmouseout に書くだけでよいみたいです。 <a href="#" onmouseover="ajax_showTooltip('読み込むページのURL',this);return false" onmouseout="ajax_hideTooltip()"> マウスオーバーすると「読み込むページのURL」で指定
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VegaBit.com is for sale | HugeDomains
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
[JS]画像にキャプションやツールチップを自動で設定するスクリプト -Captions
Jquery Plugin MopTip 2.2 demo