Create a Simple CSS + Javascript Tooltip with jQuery
It's always a joy to understand how things work. Well, at least I do. Alright, this time, I want to share with you all, how to create a simple jQuery tooltip. In this website, I'm using a script I grabed it online, and it uses onmouseover and onmouseout. It's really messy and annoying me. So, it's jQuery comes to rescue. The way it works is fairly simple, I use the Anchor tag REL and TITLE attribu
3ステップでツールチップを作成「jQuery Simple Tooltip」
twitter facebook hatena google pocket ツールチップと呼ばれるその要素に関する詳細などをヒントっぽく表示する手法があり、フォームなどに使用するとユーザビリティの向上に役立てられます。 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(){
スタイリッシュでカスタマイズ性のあるツールチップ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 メソッドのオプションとして指定してあげれば簡単に設定可能。 カラーリングも自由自在。 何より、
[WEB DESIGN] 11 Excellent Solutions for Creating Tooltips - エクセレントなTool Tip
[WEB DESIGN] 11 Excellent Solutions for Creating Tooltips – エクセレントなTool Tip Pocket Tweet エクセレントなTool Tipがまとめられた記事。各紹介は、それを実現するためのチュートリアルにリンクしてます。中でも個人的にアツいのがPanicのCodaのアレ。チュートリアルが紹介されてるので、こりゃいつか使ってやろうなんて思ってます。どれもCSSとJavascriptで作られてるので、わりと簡単に導入できそうです。いやー助かるなぁ。 11 Excellent Solutions for Creating Tooltips >>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JAVASCRIPT] Build a Better Tooltip with jQuery Awesomeness - クールなToolTip JS
CSSのみで画像に違和感なく注釈を入れるサンプル:phpspot開発日誌
[JS]ナビゲーションにツールチップをスライド表示させるスクリプト
[JS]a要素以外にも実装が可能なフレキシブルなツールチップのスクリプト -wTooltip