その他のJSライブラリバルーン・ツールチップ
- Ajax tooltip
- Animated Tooltip Javascript
- Balloon tooltip
- BoxOver 2.1
- Create a Nice, Lightweight JavaScript Tooltip
- CSS Tooltips - Floating HTML Elements
- Finding a Javascript Tool Tip Script
- GLT - Good-Looking Tooltips〔HTML要素のalt属性・title属性をツールチップ表示〕
- JavaScript, DHTML Tooltips
- lixlpixel Javascript tooltips
- Nice Titles
- overLIB
- Popup Balloons
- qTip - CSS Tooltips
- Rich HTML Balloon Tooltip
- SuperNote v1.0beta2
- Sweet Titles 1.0
- Title To Note
- Tooltip for forms〔フォーム要素にツールチップ表示〕
- Tooltip with transparent shadow
- Unobtrusive and Slightly Accessible CSS Tool Tips on Semi Transparent CSS Menus
- websnapr - Preview Bubble Javascript v2.0
- wg:Bubble Tooltips
- Yahoo! UI Library: Tooltip〔YUI使用〕
- UniTip〔半透明の角丸ツールチップ、qTipベース〕
Ajax tooltip
2008/10/6
Ajax tooltip - dhtmlgoodies.com
［CSS］ajax-tooltip.css
［JS］ajax-dynamic-content.js、ajax.js、ajax-tooltip.js
［JS］ajax-dynamic-content.js、ajax.js、ajax-tooltip.js
リンクのマウスオーバー時に、HTMLページをバルーン内に表示するライブラリです。
設置イメージAjax tooltipの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Ajax tooltip | 設置サンプル</title>
<script type="text/javascript" src="/content/lib/ajax-tooltip/js/ajax-dynamic-content.js"></script>
<script type="text/javascript" src="/content/lib/ajax-tooltip/js/ajax.js"></script>
<script type="text/javascript" src="/content/lib/ajax-tooltip/js/ajax-tooltip.js"></script>
<link rel="stylesheet" href="/content/lib/global.css" media="screen" type="text/css" />
<link rel="stylesheet" href="/content/lib/ajax-tooltip/css/ajax-tooltip.css" media="screen" type="text/css" />
<style type="text/css">
/* over-write */
li { margin:5px 0 5px 18px; }
</style>
</head>
<body>
<h1><a href='http://www.dhtmlgoodies.com/index.html?whichScript=ajax-tooltip'>Ajax tooltip - dhtmlgoodies.com</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーすると、HTMLページがバルーン表示されます。</p>
<ul>
<li><a href="#" onmouseover="ajax_showTooltip('/content/lib/ajax-tooltip/demo-pages/page1.html',this);return false;" onmouseout="ajax_hideTooltip()">クリスピー・クリーム・ドーナツ</a></li>
<li><a href="#" onmouseover="ajax_showTooltip('/content/lib/ajax-tooltip/demo-pages/page2.html',this);return false;" onmouseout="ajax_hideTooltip()">くまさんケーキ</a></li>
</ul>
</body>
</html>
Animated Tooltip Javascript
2008/10/6
Animated Tooltip Javascript
著作権表示
Tooltip.js
シンプルなツールチップ、透過や背景付き、アニメーション効果付きなどいろいろなツールチップを表示するライブラリ。 高さの指定に100%やauto、min-heightなどを使うとうまく表示されません。 シンプルなツールチップには、20%とか10em、100pxなどの明確な数値を指定する必要があります。 アニメーション付のツールチップは、px指定で固定値を指定する必要があります。
設置イメージoverLIBの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Animated Tooltip Javascript | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script language="javascript" src="/content/lib/animated_tooltip_javascript/Tooltip.js"></script>
<script type="text/javascript">
var t1=null;
var l1="JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）";
var l2="DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。";
var l3="<strong>Ajax From Wikipedia<\/strong><br \/>http://ja.wikipedia.org/wiki/Ajax";
var t1=t2=t3=t4=null;
function init()
{
t1 = new ToolTip("a",false);
t2 = new ToolTip("b",true,40);
t3 = new ToolTip("c",true,40);
t4 = new ToolTip("d",true,40);
}
</script>
</head>
<body onload="init()">
<h1><a href='http://ashishware.com/Tooltip.shtml'>Animated Tooltip Javascript</a> | 設置サンプル</h1>
<div id="a" style="background-color:#f5f5e8;width:300px;padding:5px;height:6em;overflow:auto;border:solid 1px gray;text-align:left;"></div>
<div id="b" style="background-color:#f5f5e8;width:300px;padding:5px;height:70px;border:solid 1px gray;text-align:left;"></div>
<div id="c" style="background-color:#0075d9;color:#fff;padding:5px;width:300px;height:70px;border:solid 1px #0075d9;text-align:left;filter:alpha(Opacity=80);opacity:0.80;"></div>
<div id="d" style="background-color:white;width:300px;height:70px;padding:5px;filter:alpha(Opacity=75);opacity:0.75;border:solid 1px gray;background-image:url('/content/img/bg_stripe_dark.png');text-align:left;color:#fff;"></div>
<p>▼リンクにマウスオーバーするとツールチップが表示されます。</p>
<h2>シンプルなツールチップ</h2>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="ttip" onmouseover="if(t1)t1.Show(event,l1)" onmouseout="if(t1)t1.Hide(event)">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="ttip" onmouseover="if(t1)t1.Show(event,l2)" onmouseout="if(t1)t1.Hide(event)">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XMLの略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="ttip" onmouseover="if(t1)t1.Show(event,l3)" onmouseout="if(t1)t1.Hide(event)">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
<h2>アニメーション効果付のツールチップ</h2>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="ttip" onmouseover="if(t2)t2.Show(event,l1)" onmouseout="if(t2)t2.Hide(event)">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="ttip" onmouseover="if(t2)t2.Show(event,l2)" onmouseout="if(t2)t2.Hide(event)">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XMLの略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="ttip" onmouseover="if(t2)t2.Show(event,l3)" onmouseout="if(t2)t2.Hide(event)">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
<h2>アニメーション効果付のツールチップ（背景色指定あり）</h2>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="ttip" onmouseover="if(t3)t3.Show(event,l1)" onmouseout="if(t3)t3.Hide(event)">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="ttip" onmouseover="if(t3)t3.Show(event,l2)" onmouseout="if(t3)t3.Hide(event)">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XMLの略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="ttip" onmouseover="if(t3)t3.Show(event,l3)" onmouseout="if(t3)t3.Hide(event)">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
<h2>アニメーション効果付のツールチップ（背景画像指定あり）</h2>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="ttip" onmouseover="if(t4)t4.Show(event,l1)" onmouseout="if(t4)t4.Hide(event)">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="ttip" onmouseover="if(t4)t4.Show(event,l2)" onmouseout="if(t4)t4.Hide(event)">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XMLの略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="ttip" onmouseover="if(t4)t4.Show(event,l3)" onmouseout="if(t4)t4.Hide(event)">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
</body>
</html>
Balloon tooltip
2008/10/6
Balloon tooltip - dhtmlgoodies.com
［CSS］bubble-tooltip.css
［JS］bubble-tooltip.js
［JS］bubble-tooltip.js
リンクにマウスオーバーした時に、吹き出し風のバルーン表示するJSライブラリです。
<a href="#" onmouseover="showToolTip(event,'バルーンに表示する内容');return false" onmouseout="hideToolTip()">キーワード</a>のように、a要素のマウスイベントによってバルーンの表示・非表示を切り替えます。
「バルーン内に表示する内容」には、HTMLを記述できます。 例えば、strong要素で文字を太字にしたり、img要素で画像を表示することもできます。
設置イメージ
バルーン部分は3枚の画像とCSSで定義されているので、カスタマイズすることもできます。
ただしバルーンの幅をデフォルトサイズより広げるなど変更した場合は、JSファイル（「bubble-tooltip.js」）の35行目あたりにあるvar leftPos = e.clientX - 100;を適宜な数値に変更して、吹き出し位置を微調整する必要があります。
以下の例では、バルーンの画像を200pxにしています。
この場合、var leftPos = e.clientX - 140;とするとちょうどよい感じになります。
Balloon tooltipの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Balloon tooltip | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" type="text/css" href="/content/lib/balloon_tooltip/css/bubble-tooltip.css" media="screen" />
<script type="text/javascript" src="/content/lib/balloon_tooltip/js/bubble-tooltip.js"></script>
<style type="text/css">
/* over-write */
#bubble_tooltip { width:200px; }
#bubble_tooltip strong { font-size:1.2em; color:#0075d9; }
</style>
</head>
<body>
<div id="bubble_tooltip">
<div class="bubble_top"><span></span></div>
<div class="bubble_middle"><span id="bubble_tooltip_content">Content is comming here as you probably can see.Content is comming here as you probably can see.</span></div>
<div class="bubble_bottom"></div>
</div>
<h1><a href="http://www.dhtmlgoodies.com/index.html?whichScript=bubble_tooltip">Balloon tooltip - dhtmlgoodies.com</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーするとツールチップが表示されます。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、<a href="#" onmouseover="showToolTip(event,'<strong>ユーザーインターフェース<\/strong><br \/>機械、特にコンピュータとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェース。');return false" onmouseout="hideToolTip()">ユーザーインターフェース</a>構築技術の総称。<a href="#" onmouseover="showToolTip(event,'<strong>XMLHttpRequest<\/strong><br \/>JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）。');return false" onmouseout="hideToolTip()">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じて<a href="#" onmouseover="showToolTip(event,'<strong>DHTML<\/strong><br \/>DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。');return false" onmouseout="hideToolTip()">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XML の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" onmouseover="showToolTip(event,'<strong>Ajax From Wikipedia<\/strong><br \/>http://ja.wikipedia.org/wiki/Ajax');return false" onmouseout="hideToolTip()">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
</body>
</html>
BoxOver 2.1
2008/10/6
BoxOver 2.1
IE 6, IE 5, Mozilla 1.4+, FireFox 0.9.3 Opera 7
個人・商用利用可
［CSS］boxover
［JS］boxover.js
［JS］boxover.js
半透明のツールチップ表示するライブラリ。 要素のtitle属性にツールチップのヘッダ部分とボディー部分を独自の形式で指定します。 フェード効果や表示するタイミングなどの指定も可能です。
<a href='#' title='header[用語]body[用語の説明]'>用語</a>
設置イメージ（イメージマップの例）
設置イメージ（リンクの例）BoxOver 2.1の設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>BoxOver 2.1 | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" type="text/css" src="/content/lib/boxover/boxover.css" />
<script type="text/javascript" src="/content/lib/boxover/boxover.js"></script>
</head>
<body>
<h1><a href="http://boxover.swazz.org/">BoxOver 2.1</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーすると「ツールチップ」が表示されます。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" title="header=[XMLHttpRequest] body=[JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）]">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" title="header=[DHTML] body=[DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。]">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" title="header=[XML] body=[Extensible Markup Language （エクステンシブルマークアップランゲージ）。]">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" title="header=[Ajax From Wikipedia] body=[http://ja.wikipedia.org/wiki/Ajax]">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
<p>▼にマウスオーバーすると「ヘッダ部に<img src='/content/lib/boxover/info.gif' style='vertical-align:middle;padding-right:3px;'>アイコン入りのツールチップ」が表示されます。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" title="header=[<img src='/content/lib/boxover/info.gif' style='vertical-align:middle;padding-right:3px;'>XMLHttpRequest] body=[JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）]">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" title="header=[<img src='/content/lib/boxover/info.gif' style='vertical-align:middle;padding-right:3px;'>DHTML] body=[DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。]">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" title="header=[<img src='/content/lib/boxover/info.gif' style='vertical-align:middle;padding-right:3px;'>XML] body=[Extensible Markup Language （エクステンシブルマークアップランゲージ）。]">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" title="header=[<img src='/content/lib/boxover/info.gif' style='vertical-align:middle;padding-right:3px;'>Ajax From Wikipedia] body=[http://ja.wikipedia.org/wiki/Ajax]">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
<p>▼フェード効果あり（delay=[400] fade=[on]）</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" title="header=[XMLHttpRequest] body=[JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）] delay=[400] fade=[on]">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" title="header=[DHTML] body=[DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。] delay=[400] fade=[on]">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" title="header=[XML] body=[Extensible Markup Language （エクステンシブルマークアップランゲージ）。] delay=[400] fade=[on]">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" title="header=[Ajax From Wikipedia] body=[http://ja.wikipedia.org/wiki/Ajax] delay=[400] fade=[on]">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
<p>▼画像にマウスオーバーするとツールチップが表示されます。</p>
<p><img src="/content/img/pic1-thumb.png" title="header=[クリスピー・クリーム・ドーナツ] body=[新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ（Krispy Kreme Doughnuts）」。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！]"></p>
<p>▼イメージマップの例。ドーナツにマウスオーバーすると、ドーナツの説明をツールチップ表示します。</p>
<img src="/content/img/pic1.png" usemap="#usermap">
<map name="usermap">
<area shape="circle" href="javascript:void(0)" title="header=[オリジナルグレーズド] body=[シンプルでオーソドックスなシュガーコーディングしてあるドーナツ]" coords="49,40,40" />
<area shape="circle" href="javascript:void(0)" title="header=[オリジナルグレーズド] body=[シンプルでオーソドックスなシュガーコーディングしてあるドーナツ]" coords="125,50,40" />
<area shape="circle" href="javascript:void(0)" title="header=[パンプキンドーナツ] body=[中にかぼちゃペーストが入っています。]" coords="203,41,40" />
<area shape="circle" href="javascript:void(0)" title="header=[パンプキンドーナツ] body=[中にかぼちゃペーストが入っています。]" coords="275,41,40" />
<area shape="circle" href="javascript:void(0)" title="header=[オリジナルグレーズド] body=[シンプルでオーソドックスなシュガーコーディングしてあるドーナツ]" coords="45,117,40" />
<area shape="circle" href="javascript:void(0)" title="header=[銀座限定] body=[オレンジピール入り！]" coords="198,112,40" />
<area shape="circle" href="javascript:void(0)" title="header=[銀座限定] body=[オレンジピール入り！]" coords="284,107,40" />
<area shape="circle" href="javascript:void(0)" title="header=[チョコレートグレーズド スプリンクル] body=[シンプルな生地にチョコレートコーティング！カラフルなチョコレートスプレーがかわいいドーナツ]" coords="46,200,40" />
<area shape="circle" href="javascript:void(0)" title="header=[チョコレートグレーズド] body=[シンプルな生地にチョコレートコーティングしてあるドーナツ]" coords="207,198,40" />
<area shape="circle" href="javascript:void(0)" title="header=[チョコレートグレーズド] body=[シンプルな生地にチョコレートコーティングしてあるドーナツ]" coords="286,187,40" />
</map>
</body>
</html>
Create a Nice, Lightweight JavaScript Tooltip
2008/10/6
Create a Nice, Lightweight JavaScript Tooltip
［CSS］style
［JS］script.js
［JS］script.js
画像を使った半透明の角丸ツールチップを表示するライブラリ。 フェード効果付きです。 ツールチップの内容にHTML文も指定することができます。 JS側でフェードの速度、ツールチップとカーソルの距離などの設定を変更することができます。
設置イメージ
設置イメージCreate a Nice, Lightweight JavaScript Tooltipの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Create a Nice, Lightweight JavaScript Tooltip | 設置サンプル</title>
<script type="text/javascript" src="/content/lib/sandbox/script.js"></script>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" type="text/css" href="/content/lib/sandbox/style.css" />
</head>
<body>
<h1><a href='http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/'>Create a Nice, Lightweight JavaScript Tooltip</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーするとツールチップが表示されます。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="hotspot" onmouseover="tooltip.show('JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）');" onmouseout="tooltip.hide();">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="hotspot" onmouseover="tooltip.show('DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。');" onmouseout="tooltip.hide();">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XMLの略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="hotspot" onmouseover="tooltip.show('<strong>Ajax From Wikipedia<<\/strong><br \/>http://ja.wikipedia.org/wiki/Ajax');" onmouseout="tooltip.hide();">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
<p><img class="hotspot" onmouseover="tooltip.show('新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ（Krispy Kreme Doughnuts）」。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！');" onmouseout="tooltip.hide();" src="/content/img/pic1-thumb.png" alt="クリスピー・クリーム・ドーナッツ" /></p>
</body>
</html>
CSS Tooltips - Floating HTML Elements
2008/10/6
CSS Tooltips - Floating HTML Elements
シンプルなツールチップ表示ライブラリ。
設置イメージCSS Tooltipsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>CSS Tooltips - Floating HTML Elements | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style type="text/css">
/* css-tooltips-floating-html-elements */
a.tip {
border-bottom: 1px dashed brown;
text-decoration: none;
}
a.tip:hover {
position: relative;
}
a.tip span {
display: none;
}
a.tip:hover span {
display: block;
position: absolute; top: 10px; left: 0;
/* formatting only styles */
padding: 5px; margin: 10px; z-index: 100;
background: #f0f0f0; border: 1px dotted #c0c0c0;
opacity: 0.9;
/* 最小幅200pxを指定 */
min-width:200px;
width:auto!important;
width:200px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var links = document.links || document.getElementsByTagName('a');
var n = links.length;
for (var i = 0; i < n; i++) {
if (links[i].className == 'tip' && links[i].title && links[i].title != '') {
// add the title to anchor innerhtml
links[i].innerHTML += '<span>'+links[i].title+'</span>';
links[i].title = ''; // remove the title
}
}
}
</script>
</head>
<body>
<h1><a href='http://loadaveragezero.com/vnav/labs/CSS/tooltips.php'>CSS Tooltips - loadaverageZero</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーするとツールチップが表示されます。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="tip" title="JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）">XMLHttpRequest</a></span></a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="tip" title="DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" class="tip" title="Extensible Markup Language （エクステンシブルマークアップランゲージ）。">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="tip" title="Ajax From Wikipedia">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
</body>
</html>
Finding a Javascript Tool Tip Script
2008/10/6
Finding a Javascript Tool Tip Script
設置イメージFinding a Javascript Tool Tip Scriptの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Finding a Javascript Tool Tip Script | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style type="text/css">
img.icon { padding-right:5px; vertical-align:middle; }
/* ----- tool tip specific styles ----- */
#theToolTip { position:absolute;left:-300px;width:200px;border:1px solid #999;padding:6px 0px 0px 10px;background-color:#f0f0f0;visibility:hidden;z-index:100;filter:progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,strength=4); }
#ToolTipPointer { position:absolute;left:-300px;z-index:101;visibility:hidden; }
#theToolTip p { margin-right:10px;margin-top:0; }
#ToolTipTextWrap { font-weight:bold;#592c16;margin-right:10px; }
</style>
</head>
<body>
<h1><a href='http://codylindley.com/Javascript/219/finding-a-javascript-tool-tip-script'>Finding a Javascript Tool Tip Script</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーするとツールチップを表示します。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>
Ajax（アジャックス、エイジャックス）は、<a href="#" class="addToolTip" title="<div id='ToolTipTextWrap'></div><p><img src='/content/img/ajax/info.gif' class='icon' />機械、特にコンピュータとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェース。</p>">ユーザーインターフェース</a>構築技術の総称。
<a href="#" class="addToolTip" title="<div id='ToolTipTextWrap'></div><p><img src='/content/img/ajax/info.gif' class='icon' />JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）。</p>">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
通信結果に応じて<a href="#" class="addToolTip" title="<div id='ToolTipTextWrap'></div><p><img src='/content/img/ajax/info.gif' class='icon' />DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。</p>">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。
</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XML の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="addToolTip" title="<div id='ToolTipTextWrap'></div><p>http://ja.wikipedia.org/wiki/Ajax</p>">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
<script language="JavaScript" type="text/JavaScript">
//Edit the informaiton between the quotes below with the path to your image.
var imagePath = "/content/img/ajax/tooltiparrow.gif";
function addwarning(){
var thealinks = document.getElementsByTagName("a");
if (!thealinks) { return; }
for(var x=0;x!=thealinks.length;x++){
if(thealinks[x].className == "addToolTip"){
thealinks[x].setAttribute("tooltiptext",thealinks[x].title);
thealinks[x].removeAttribute("title");
thealinks[x].onmouseover=function gomouseover(){ddrivetip(this.getAttribute("tooltiptext"))};
thealinks[x].onmouseout=function gomouseout(){hideddrivetip();};
}
}
}
var offsetfromcursorX=-7; //Customize x offset of tooltip
var offsetfromcursorY=23; //Customize y offset of tooltip
var offsetdivfrompointerX=13; //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY=13; //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).
document.write('<div id="theToolTip"></div>'); //write out tooltip DIV
document.write('<img id="ToolTipPointer" src="'+imagePath+'">'); //write out pointer image
var ie=document.all;
var ns6=document.getElementById && !document.all;
var enabletip=false;
if (ie||ns6) {
var tipobj=document.all? document.all["theToolTip"] : document.getElementById? document.getElementById("theToolTip") : "";
}
var pointerobj=document.all? document.all["ToolTipPointer"] : document.getElementById? document.getElementById("ToolTipPointer") : "";
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
function ddrivetip(thetext, thewidth, thecolor){
if (ns6||ie){
if (typeof thewidth!=="undefined") {tipobj.style.width=thewidth+"px";}
if (typeof thecolor!=="undefined" && thecolor!=="") {tipobj.style.backgroundColor=thecolor;}
tipobj.innerHTML=thetext;
enabletip=true;
return false;
}
}
function positiontip(e){
if (enabletip){
var nondefaultpos=false;
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20;
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20;
var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX;
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY;
var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000;
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth){
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=curX-tipobj.offsetWidth+"px";
nondefaultpos=true;
}
else if (curX<leftedge)
{tipobj.style.left="5px";}
else{
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px";
pointerobj.style.left=curX+offsetfromcursorX+"px";
}
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px";
nondefaultpos=true;
}
else{
tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px";
pointerobj.style.top=curY+offsetfromcursorY+"px";
}
tipobj.style.visibility="visible";
if (!nondefaultpos) {pointerobj.style.visibility="visible";}
else{
pointerobj.style.visibility="hidden";}
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false;
tipobj.style.visibility="hidden";
pointerobj.style.visibility="hidden";
tipobj.style.left="-1000px";
tipobj.style.backgroundColor='';
tipobj.style.width='';
}
}
document.onmousemove=positiontip;
addwarning();
</script>
</body>
</html>
GLT - Good-Looking Tooltips
HTML要素のalt属性・title属性をツールチップ表示
2008/10/6
GLT - Good-Looking Tooltips
個人・商用利用可
glt.js
title属性またはalt属性が指定してあるHTML要素にマウスオーバーした時に、そのtitle属性またはalt属性の値をツールチップ表示するライブラリです。 ツールチップはスケルトンでかわいらしい感じです。
設置するには、head要素内で「glt.js」を読み込み、3つのクラス（.glt-elm／.glt-elm p／.glt-elm img）をスタイルシートで指定します。
ツールチップのデザインを角丸にするには、上辺画像（rounded-top.gif）と下辺画像（rounded-bottom.gif）をダウンロードし画像のパスをJSで指定する必要があります。 カスタマイズの詳細は、GLT implementationで解説されています。
設置イメージGLT - Good-Looking Tooltipsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>GLT - Good-Looking Tooltips | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="/content/lib/glt/glt.js"></script>
<script type="text/javascript">
/* 角丸ツールチップの上辺画像 */
GLT.topImagePath = "/content/lib/glt/rounded-top.gif";
/* 角丸ツールチップの下辺画像 */
GLT.bottomImagePath = "/content/lib/glt/rounded-bottom.gif";
</script>
<style type="text/css">
.glt-elm { position:absolute; left:0; top:0; width:150px; color:#fff; opacity:0.9; visibility:hidden; }
.glt-elm p { margin:0; padding:5px; background:#666; font-size:.8em; }
.glt-elm img { display:block; }
/* for IE */
.glt-elm { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); }
</style>
</head>
<body>
<h1><a href='http://www.robertnyman.com/glt/'>GLT - Good-Looking Tooltips</a> | 設置サンプル</h1>
<p>▼マウスオーバーすると、a要素のtitle属性の内容がバルーン表示されます。</p>
<p>
<a href="http://www.flickr.com/photos/22559849@N06/2973155055/" title="クリスピー・クリーム・ドーナツ"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_t.jpg" width="100" height="75" alt="クリスピー・クリーム・ドーナツ" /></a>
<a href="http://www.flickr.com/photos/22559849@N06/2974008614/" title="くまさんケーキ"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" /></a>
</p>
</body>
</html>
JavaScript, DHTML Tooltips
2008/10/6
JavaScript, DHTML Tooltips
LGPL
wz_tooltip.js
リンクやフォーム要素にマウスオーバーした時にツールチップ表示するライブラリです。 外部JSはbody要素内に記述する必要があります。
設置イメージJavaScript, DHTML Tooltipsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>qTip - CSS Tooltip | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/qtip/qTip.css" media="screen" />
<style>
body{ margin:20px; padding:0; font:12px/1.5 verdana,sans-seif; }
h1 { font-size:150%; }
blockquote{ margin:0; padding:10px; border:1px solid #ccc; background:#f7f7f7 url("/content/img/skin/dquot.gif") no-repeat 10px 10px; }
dl { margin:0; padding:0; }
dt { font-weight:bold; margin:0 0 0 25px; padding:0; font-size:120%; }
dd { margin:0; padding:0; }
p { margin:1em 0; padding:0; }
li { margin-bottom:1em; }
img { border:0; }
</style>
</head>
<body>
<script type="text/javascript" src="/content/lib/wz_tooltip/wz_tooltip.js"></script>
<h1><a href="http://www.walterzorn.com/tooltip/tooltip_e.htm">JavaScript, DHTML Tooltips</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーするとツールチップを表示します。</p>
<ul>
<li>
<a href="javascript:void(0);" onmouseover="Tip('ツールチップとは、グラフィカルユーザインタフェース (GUI) において<br>普及した表現手法のひとつ（ウィジェット）である。by Wikipedia')" onmouseout="UnTip()">シンプルなツールチップ</a>
</li>
<li>
<a href="javascript:void(0)" onmouseover="TagToTip('divTagToTip')" onmouseout="UnTip()">ツールチップに表示する内容をタグで指定</a>
<div id="divTagToTip">
<blockquote>
<dl>
<dt>ツールチップ</dt>
<dd>
<p>ツールチップとは、グラフィカルユーザインタフェース (GUI) において<br>普及した表現手法のひとつ（ウィジェット）である。</p>
<cite>by Wikipedia</cite>
</dd>
</blockquote>
</div>
</li>
<li>
<a href="javascript:void(0);" onmouseover="Tip('<img src=/content/img/pic1-thumb.png width=120 height=90 align=right>新宿高島屋のサザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん<strong>「クリスピー・クリーム・ドーナツ」</strong>。ドーナツの箱がピザの箱みたいで、味もアメリカン！ビジュアルから行ってさぞかし劇甘なんだろうなと思ったけど、意外とほどよい甘さ。生地はかなりソフトなので固めでサクサクしたドーナツが好きな人にはおすすめできないかもｗ', WIDTH, 350, PADDING, 6, BGCOLOR, '#ffffff')" onmouseout="UnTip()">画像入りツールチップ</a>
</li>
<li>
<a href="javascript:void(0)" onmouseover="Tip('<strong>ツールチップ</strong><br>ツールチップとは、グラフィカルユーザインタフェース (GUI) において<br>普及した表現手法のひとつ（ウィジェット）である。<br>by Wikipedia')" onmouseout="UnTip()">HTMLタグ入りツールチップ</a>
</li>
<li>
<a href="javascript:void(0)" onmouseover="Tip('<table border=\'0\' cellspacing=\'5\'><tr><th colspan=\'2\' style=\'font-size:8pt;background:#ffcccc;\'>HTML table in tooltip<\/th><\/tr><tr><td style=\'font-size:8pt;background:#ffffff;\'>Row 2, Cell 1<\/td><td style=\'font-size:8pt;background:#ffffff;\'>Row 2, Cell 2<\/td><\/tr><tr><td style=\'font-size:8pt;background:#ffffff;\'>Row 3, Cell 1<\/td><td style=\'font-size:8pt;background:#ffffff;\'>Row 3, Cell 2<\/td><\/tr><\/table>')" onmouseout="UnTip()">テーブル入りツールチップ</a>
</li>
<li>
<a href="javascript:void(0);" onmouseover="Tip('ツールチップとは、グラフィカルユーザインタフェース (GUI) において<br>普及した表現手法のひとつ（ウィジェット）である。<br>by Wikipedia', TITLE, 'ツールチップ', BGCOLOR, '#ffcccc', FONTCOLOR, '#800000', FONTSIZE, '9pt', FONTFACE, 'Courier New, Courier, mono', BORDERCOLOR, '#c00000')" onmouseout="UnTip()">タイトル付＆色カスタマイズ</a>
</li>
<li>画像にマウスオーバーでツールチップ表示<br>
<p><img src="/content/img/pic1-thumb.png" alt="クリスピー・クリーム・ドーナツ" width="120" height="90" onmouseover="Tip('新宿高島屋のサザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん<strong>「クリスピー・クリーム・ドーナツ」</strong>。ドーナツの箱がピザの箱みたいで、味もアメリカン！ビジュアルから行ってさぞかし劇甘なんだろうなと思ったけど、意外とほどよい甘さ。生地はかなりソフトなので固めでサクサクしたドーナツが好きな人にはおすすめできないかもｗ', WIDTH, 300, FADEIN, 500, FADEOUT, 500)" onmouseout="UnTip()"></p>
</li>
<li>
<a href="javascript:void(0);" onmouseover="Tip('ツールチップとは、グラフィカルユーザインタフェース (GUI) において普及した表現手法のひとつ（ウィジェット）である。<br>by Wikipedia', WIDTH, 250, ABOVE, true, OFFSETX, 1, FADEIN, 400, FADEOUT, 300)" onmouseout="UnTip()">幅指定、フェード効果あり</a>
</li>
<li>
<a href="javascript:void(0)" onmouseover="Tip('ツールチップとは、グラフィカルユーザインタフェース (GUI) において普及した表現手法のひとつ（ウィジェット）である。<br><a href=\'http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8\'>Wikipediaより<\/a>', WIDTH, 300, TITLE, 'Tooltip Configuration', SHADOW, true, FADEIN, 300, FADEOUT, 300, STICKY, 1, CLOSEBTN, true, CLICKCLOSE, true)" onmouseout="UnTip()">閉じるボタン付</a>
</li>
</ul>
</body>
</html>
lixlpixel Javascript tooltips
2008/10/6
lixlpixel Javascript tooltips
CSSで透過したツールチップを表示するライブラリ。
設置イメージlixlpixel Javascript tooltipsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>lixlpixel Javascript tooltips | 設置サンプル</title>
<script type="text/javascript" src="/content/lib/lixlpixel/lixlpixel.js"></script>
<style type="text/css">
body{ margin:20px; padding:0; font:12px/1.5 verdana,sans-seif; }
h1 { font-size:150%; }
blockquote{ margin:1em 0; padding:10px; border:1px solid #ccc; background:#f7f7f7 url("/content/img/skin/dquot.gif") no-repeat 10px 10px; }
dl { margin:0; padding:0; }
dt { font-weight:bold; margin:0 0 0 25px; padding:0; font-size:120%; }
dd { margin:0; padding:0; }
p { margin:1em 0; padding:0; }
/* style your tooltips here */
#tooltip {
padding: 3px;
background: #f9f9f9;
border: 1px solid #ccc;
text-align:left;
font-size: .9em;
opacity: .9;
}
/* style the spans with tooltips here */
span.tip {
border-bottom: 1px solid #eee;
}
span.none {
display: none;
}
</style>
</head>
<body>
<h1><a href="http://lixlpixel.org/">lixlpixel</a> <a href="http://lixlpixel.org/javascript-tooltips/">Javascript tooltips</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーするとツールチップが表示されます。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。
<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="tip" onmouseover="tooltip('tip_xmlhttprequest');" onmouseout="exit();">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="tip" onmouseover="tooltip('tip_dhtml');" onmouseout="exit();">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" class="tip" onmouseover="tooltip('tip_xml');" onmouseout="exit();">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="tip" onmouseover="tooltip('xml_cite');" onmouseout="exit();">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
<span id="tip_xmlhttprequest"class="none">JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）</span>
<span id="tip_dhtml"class="none">DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。</span>
<span id="tip_xml"class="none">Extensible Markup Language （エクステンシブルマークアップランゲージ）。</span>
<span id="xml_cite"class="none">Ajax From Wikipedia</span>
</body>
</html>
Nice Titles
2008/10/6
Nice Titles
nicetitle.js
a要素に独自のnicetitle属性を指定してツールチップを表示するライブラリ。 ツールチップに表示する内容はnicetitle属性に指定します。 a要素のhref属性に指定した値（URL）がツールチップの下に自動的に挿入されます。 透過には背景画像を使用しています。
設置イメージNice Titlesの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Nice Titles | 設置サンプル</title>
<script type="text/javascript" src="/content/lib/nicetitle/nicetitle.js"></script>
<link rel="stylesheet" type="text/css" href="/content/lib/nicetitle/nicetitle.css" />
<style type="text/css" media="screen">
body{ margin:20px; padding:0; font:12px/1.5 verdana,sans-seif; }
h1 { font-size:150%; }
textarea { font-size:100%; }
blockquote{ margin:1em 0; padding:10px; border:1px solid #ccc; background:#f7f7f7 url("/content/img/skin/dquot.gif") no-repeat 10px 10px; }
dl { margin:0; padding:0; }
dt { font-weight:bold; margin:0 0 0 25px; padding:0; font-size:120%; }
dd { margin:0; padding:0; }
p { margin:1em 0; padding:0; }
</style>
</head>
<body>
<h1><a href='http://www.kryogenix.org/code/browser/title/'>Nice Titles</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーすると、a要素のtitle属性の内容がツールチップ表示されます。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、<a href="http://ja.wikipedia.org/wiki/UI" title="機械、特にコンピュータとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェース。">ユーザーインターフェース</a>構築技術の総称。
<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" title="JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）。">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" title="DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XML の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" title="Ajax From Wikipedia">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
</body>
</html>
overLIB
2008/10/6
overLIB
著作権表示
overlib.js
ツールチップを表示するライブラリ。 パラメータで幅、フォント、閉じるボタンの有無、タイトル付きなどがいろいろ設定できます。
<a href='#'
onclick='return false;'
onmouseout='return nd();'
onmouseover='return overlib("ツールチップの内容", WIDTH, 300, STICKY, CAPTION, 'タイトル');'
>リンクテキスト</a>
設置イメージoverLIBの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>overLIB | 設置サンプル</title>
<script type="text/javascript" src="/content/lib/overlib/overlib.js"></script>
<style type="text/css">
body{ margin:20px; padding:0; font:12px/1.5 verdana,sans-seif; }
h1 { font-size:150%; }
blockquote{ margin:1em 0; padding:10px; border:1px solid #ccc; background:#f7f7f7 url("/content/img/skin/dquot.gif") no-repeat 10px 10px; }
dl { margin:0; padding:0; }
dt { font-weight:bold; margin:0 0 0 25px; padding:0; font-size:120%; }
dd { margin:0; padding:0; }
p { margin:1em 0; padding:0; }
img { border:0; }
/* Popup Balloons */
#overDiv { position:absolute; visibility:hidden; z-index:1000; }
</style>
</head>
<body>
<h1><a href='http://www.bosrup.com/web/overlib/'>overLIB</a> | 設置サンプル</h1>
<div id="overDiv"></div>
<p>リンクにマウスオーバーするとツールチップが表示されます。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" onmouseout="return nd();" onclick="return false;" onmouseover="return overlib('JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）', WIDTH, 300, STICKY, CAPTION, 'XMLHttpRequest');">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" onmouseout="return nd();" onclick="return false;" onmouseover="return overlib('DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。', WIDTH, 300, STICKY, CAPTION, 'DHTML');">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" onmouseout="return nd();" onclick="return false;" onmouseover="return overlib('Extensible Markup Language （エクステンシブルマークアップランゲージ）。', WIDTH, 300, STICKY, CAPTION, 'XML');">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" onmouseout="return nd();" onclick="return false;" onmouseover="return overlib('http://ja.wikipedia.org/wiki/Ajax');">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
</body>
</html>
Popup Balloons
2008/10/6
Popup Balloons - GMOD
balloon.config、balloon.js、yahoo-dom-event.js
テキスト、HTML文、画像をバルーン表示したり、指定したURLのページをiframeに読み込んでバルーン表示するライブラリ。 閉じるボタンの有無や、バルーンのサイズをパラメータで指定することができます。
設置イメージPopup Balloonsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Popup Balloons | 設置サンプル</title>
<script type="text/javascript" src="/content/lib/popup_balloons/js/balloon.config.js"></script>
<script type="text/javascript" src="/content/lib/popup_balloons/js/balloon.js"></script>
<script type="text/javascript" src="/content/lib/popup_balloons/js/yahoo-dom-event.js"></script>
<script>
var balloon = new Balloon;
balloon.images = "/content/lib/popup_balloons/images"; /* 画像フォルダ上書き */
</script>
<style type="text/css">
body{ margin:20px; padding:0; font:12px/1.5 verdana,sans-seif; }
h1 { font-size:150%; }
blockquote{ margin:1em 0; padding:10px; border:1px solid #ccc; background:#f7f7f7 url("/content/img/skin/dquot.gif") no-repeat 10px 10px; }
dl { margin:0; padding:0; }
dt { font-weight:bold; margin:0 0 0 25px; padding:0; font-size:120%; }
dd { margin:0; padding:0; }
p { margin:1em 0; padding:0; }
img { border:0; }
/* Popup Balloons */
.hidden { display:none; }
</style>
</head>
<body>
<h1><a href='http://gmod.org/wiki/Popup_Balloons'>Popup Balloons - GMOD</a> | 設置サンプル</h1>
<h2>シンプルなバルーン</h2>
<p>
<a href="javascript:void(0)" class="tt" onmouseover="balloon.showTooltip(event,'テキストのみのシンプルナバルーンです。')">マウスオーバーしてください</a>
</p>
<h2>隠していたHTML文をバルーン表示</h2>
<p>
<a href="javascript:void(0)" class=tt onmouseover="balloon.showTooltip(event,'load:lorem1')">マウスオーバーしてください</a>
</p>
<h2>閉じるボタン付のバルーン</h2>
<a href="javascript:void(0)" class="tt" onmouseover="balloon.showTooltip(event,'load:lorem1',1)">マウスオーバーしてください</a>
<h2>閉じるボタン付のバルーン（幅指定）</h2>
<p>
<a href="javascript:void(0)" class="tt" onmouseover="balloon.showTooltip(event,'load:lorem1',1,300)">マウスオーバーしてください</a>
</p>
<h2>画像をポップアップ表示</h2>
<p>
<a href="javascript:void(0)" class="tt" onmouseover="balloon.showTooltip(event,'<img height=\'240\' width=\'320\' src=\'/content/img/pic1.png\' />')">マウスオーバーしてください</a>
</p>
<h2>指定したURLをiframeに読み込んでバルーン表示</h2>
<p>
<a href="javascript:void(0)" class="tt" onmouseover="balloon.showTooltip(event,'<iframe width=\'500\' height=\'400\' frameborder=0 src=\'http://www.google.co.jp\'></iframe>',1,500)">マウスオーバーしてください</a>
</p>
<div id="lorem1" class="hidden">
<p>
<img src="/content/img/pic1-thumb.png" alt="クリスピー・クリーム・ドーナツ" width="120" height="90" align="right" style="margin:0 0 5px 5px;" />
新宿高島屋のサザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん<strong>「クリスピー・クリーム・ドーナツ」</strong>。
ドーナツの箱がピザの箱みたいで、味もアメリカン！ビジュアルから行ってさぞかし劇甘なんだろうなと思ったけど、意外とほどよい甘さ。
生地はかなりソフトなので固めでサクサクしたドーナツが好きな人にはおすすめできないかもｗ
</p>
</div>
</body>
</html>
qTip - CSS Tooltips
2008/10/6
qTip - CSS Tooltip
IE 5.5+, Firefox, Safari, Opera
著作権表示
［CSS］qTip.css
［JS］qTip.js
［JS］qTip.js
リンクやフォーム要素にマウスオーバーした時にツールチップ表示するライブラリです。
設置イメージ
設置イメージqTip - CSS Tooltipsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>qTip - CSS Tooltip | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" type="text/css" href="/content/lib/qtip/qTip.css" media="screen" />
<script type="text/javascript" src="/content/lib/qtip/qTip.js"></script>
</head>
<body>
<h1><a href="http://qrayg.com/learn/code/qtip">qTip - CSS Tooltips</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーするとツールチップを表示します。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>
Ajax（アジャックス、エイジャックス）は、<a href="#" title="機械、特にコンピュータとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェース。">ユーザーインターフェース</a>構築技術の総称。
<a href="#" title="JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）。">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
通信結果に応じて<a href="#" title="DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。
</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XML の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" title="http://ja.wikipedia.org/wiki/Ajax">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
<br>
<p>▼ツールチップ内には、HTMLタグも使用できます。</p>
<p><a href="#" title="<img src='/content/img/pic1-thumb.png' alt='クリスピー・クリーム・ドーナツ' />">クリスピー・クリーム・ドーナツ</a>の写真です。</p>
<br>
<p>▼フォーム要素にマウスオーバーするとツールチップが表示されます。</p>
<form id="userfrm" action="#" onsubmit="return false;">
<fieldset>
<legend>登録情報</legend>
<p>▼ラベル（label要素）にマウスオーバーすると、入力ヒントがツールチップ表示されます。</p>
<table>
<tr>
<th><label for="use_name" title="あなたの「名前」を入力してください">名前：</label></th>
<td><input type="text" id="use_name" name="use_name" size="20" maxlength="256" /></td>
</tr>
<tr>
<th><label for="user_name_kana" title="あなたの「名前のフリガナ」を入力してください">名前のフリガナ：</label></th>
<td><input type="text" id="user_name_kana" name="user_name_kana" size="20" maxlength="256" /></td>
</tr>
<tr>
<th><label for="address" title="あなたの「住所」を入力してください">住所：</label></th>
<td><textarea id="address" name="address" cols="50" rows="3"></textarea></td>
</tr>
<tr>
<th><label for="sex">性別：</label></th>
<td>
<label for="sex_1" title="あなたの「性別」を選択してください"><input type="radio" id="sex_1" name="sex_1" value="male" /> 男性</label>
<label for="sex_2" title="あなたの「性別」を選択してください"><input type="radio" id="sex_2" name="sex_2" value="female" /> 女性</label>
</td>
</tr>
<tr>
<th><label for="job" title="あなたの職業を選択してください">職業：</label></th>
<td>
<select id="job" name="job">
<option value="" selected="selected">▼選択してください</option>
<option>自営業</option>
<option>会社員</option>
<option>公務員</option>
<option>パート・アルバイト</option>
<option>専業主婦</option>
<option>学生</option>
<option>その他</option>
</select>
</td>
</tr>
</table>
<p>
<label for="btn_submit" title="テストのため、「送信」ボタンをクリックしても送信されません"><input type="submit" id="btn_submit" name="btn_submit" value="送信" class="btn" /></label>
</p>
</fieldset>
</form>
</body>
</html>
Rich HTML Balloon Tooltip
2008/10/6
Rich HTML Balloon Tooltip - dinamicdrive.com
Firefox 1+、IE 5+、Opera 7+
著作権表示
［CSS］balloontip
［JS］balloontip.js
［JS］balloontip.js
矢印付のツールチップを表示するライブラリ。 「a要素のrel属性の値」と「ツールチップ表示する内容を記述した要素のid名」を同じにするだけで、簡単に実装できます。 画像の場所は、balloon.js側で設定する必要があります。 ツールチップの幅やスタイルはCSSでカスタマイズできます。
<a href='#' rel='任意のID名'>～</a> <div id='任意のID名' class='balloonstyle'>～</div>
設置イメージRich HTML Balloon Tooltipの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Rich HTML Balloon Tooltip | 設置サンプル</title>
<script type="text/javascript" src="/content/lib/richhtml_balloontooltip/balloontip.js"></script>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" type="text/css" href="/content/lib/richhtml_balloontooltip/balloontip.css" />
</head>
<body>
<h1><a href='http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm'>Rich HTML Balloon Tooltip - dinamicdrive.com</a> | 設置サンプル</h1>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、<a href="#" rel="balloon1">ユーザーインターフェース</a>構築技術の総称。<a href="#" rel="balloon2">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じて<a href="#" rel="balloon3">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XML の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" rel="balloon4">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
<div id="balloon1" class="balloonstyle">
機械、特にコンピュータとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェース。
</div>
<div id="balloon2" class="balloonstyle">
JavaScriptなどの<strong>ウェブブラウザ搭載のスクリプト言語</strong>で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）。
</div>
<div id="balloon3" class="balloonstyle">
DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。
</div>
<div id="balloon4" class="balloonstyle">
<strong>Ajax From Wikipedia</strong><br>http://ja.wikipedia.org/wiki/Ajax
</div>
</body>
</html>
SuperNote v1.0beta2
2008/10/6
SuperNote v1.0beta2
IE6/Win, IE5.5/Win, IE5/Win, Mozilla/Win, Opera8/Win, Safari 1.3/Mac.
著作権表示
［CSS］supernote.css
［JS］supernote.js
［JS］supernote.js
リンクにマウスオーバーするとフェード効果ありでツールチップを表示するライブラリです。 ツールチップ表示した部分がカレントになるため、リンクを入れたり、ツールチップ上でさらにツールチップ表示することも可能です。 閉じるボタン付もあります。
設置イメージSuperNote v1.0beta2の設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>SuperNote v1.0beta2 | 設置サンプル</title>
<script type="text/javascript" src="/content/lib/supernote/supernote.js"></script>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" type="text/css" href="/content/lib/supernote/supernote.css" />
<script type="text/javascript">
var supernote = new SuperNote('supernote', {});
function animFade(ref, counter){
var f=ref.filters, done = (counter == 1);
if(f){
if(!done && ref.style.filter.indexOf("alpha") == -1){
ref.style.filter += ' alpha(opacity=' + (counter * 100) + ')';
}else if (f.length && f.alpha) with (f.alpha){
if (done) enabled = false;
else { opacity = (counter * 100); enabled=true }
}
}else{
ref.style.opacity = ref.style.MozOpacity = counter*0.999;
}
};
supernote.animations[supernote.animations.length] = animFade;
addEvent(document, 'click', function(evt){
var elm = evt.target || evt.srcElement, closeBtn, note;
while (elm){
if ((/note-close/).test(elm.className)) closeBtn = elm;
if ((/snb-pinned/).test(elm.className)) { note = elm; break }
elm = elm.parentNode;
}
if (closeBtn && note){
var noteData = note.id.match(/([a-z_\-0-9]+)-note-([a-z_\-0-9]+)/i);
for (var i = 0; i < SuperNote.instances.length; i++)
if (SuperNote.instances[i].myName == noteData[1]){
setTimeout('SuperNote.instances[' + i + '].setVis("' + noteData[2] + '", false, true)', 100);
cancelEvent(evt);
}
}
}
);
addEvent(supernote, 'show', function(noteID){});
addEvent(supernote, 'hide', function(noteID){});
</script>
</head>
<body>
<h1><a href="http://www.twinhelix.com/dhtml/supernote/">SuperNote v1.0beta2</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーすると「ツールチップ」が表示されます。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="#demo1" class="supernote-hover-demo1">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
通信結果に応じて<a href="#demo3" class="supernote-hover-demo3">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="#demo4" class="supernote-hover-demo4">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<div style="position:relative;">
<cite><a href="#demoinline" class="supernote-click-demoinline">Ajax From Wikipedia</a></cite>
<div id="supernote-note-demoinline" class="snp-normal notedefault" style="left: 30%; width: 400px;">
<a name="demoinline"></a>
Ajax From Wikipedia
by <a href="http://ja.wikipedia.org/wiki/Ajax">Wikipedia</a>
</div>
</div>
</dd>
</dl>
</blockquote>
<div id="supernote-note-demo1" class="snp-mouseoffset pinnable notedefault">
<a name="demo1"></a>
<h5><a href="#" class="note-close">X</a>XMLHttpRequest</h5>
<p>JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための<a href="#anchor-demo2" class="supernote-hover-demo2">組み込みオブジェクト</a>（API）。</p>
<p class="cite">XMLHttpRequest by <a href="http://ja.wikipedia.org/wiki/XMLHttpRequest">Wikipedia</a></p>
</div>
<div id="supernote-note-demo2" class="snp-mousetrack notedefault">
<a name="demo2"></a>
<p>アプリケーション・プログラミング・インタフェース。アプリケーションから利用できる、オペレーティングシステムやプログラミング言語で用意されたライブラリなどの機能の入り口となるもの。</p>
<p class="cite">API From <a href="http://ja.wikipedia.org/wiki/Application_Programming_Interface">Wikipedia</a></p>
</div>
<div id="supernote-note-demo3" class="snp-mouseoffset snb-pinned notedefault">
<a name="demo3"></a>
<h5><a href="#" class="note-close">X</a>XHTML</h5>
<p>DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。</p>
<p class="cite">DHTML by <a href="http://ja.wikipedia.org/wiki/DHTML">Wikipedia</a></p>
</div>
<div id="supernote-note-demo4" class="snp-triggeroffset notedefault">
<a name="demo4"></a>
<h5>XML</h5>
<p>Extensible Markup Language （エクステンシブルマークアップランゲージ）。</p>
<p class="cite">XML by <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language">Wikipedia</a></p>
</div>
</body>
</html>
Sweet Titles 1.0
2008/10/6
Sweet Titles 1.0
Firefox 1.5 and IE6
［CSS］sweetTitles.css
［JS］addEvent.js、sweetTitles.js
［JS］addEvent.js、sweetTitles.js
設置イメージSweet Titles 1.0の設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Sweet Titles 1.0 | 設置サンプル</title>
<script type="text/javascript" src="/content/lib/sweet-titles/js/addEvent.js"></script>
<script type="text/javascript" src="/content/lib/sweet-titles/js/sweetTitles.js"></script>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" type="text/css" href="/content/lib/sweet-titles/css/sweetTitles.css" type="text/css" media="screen,projection" />
</head>
<body>
<div id="wrapper">
<h1><a href="http://www.dustindiaz.com/sweet-titles-finalized/">Sweet Titles 1.0 by Dastin Dias</a> | 設置サンプル</h1>
<p>abbr、acronym、a要素にマウスオーバーすると、各属性の値をツールチップ表示します。</p>
<h2>abbr要素の例</h2>
<p>title属性とabbr要素内のテキストがツールチップ表示されます。</p>
<pre><abbr title='用語の説明'>用語</abbr></pre>
<ul>
<li><abbr title="JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）">XMLHttpRequest</abbr>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し・・・</li>
</ul>
<h2>acronym要素の例</h2>
<p>title属性とacronym要素内のテキストがツールチップ表示されます。</p>
<pre><acronym title='用語の説明'>用語</acronym></pre>
<ul>
<li>通信結果に応じて<acronym title="DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</acronym>で動的にページの一部を書き換えるというアプローチを・・・</li>
</ul>
<h2>a要素の例</h2>
<p>href属性とtitle属性がツールチップ表示されます。</p>
<pre><a href='http://～' title='リンク先の説明'>リンク先</></pre>
<ul>
<li>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" title="Extensible Markup Language （エクステンシブルマークアップランゲージ）。">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</li>
<li><a href="http://ja.wikipedia.org/wiki/Ajax" title="Ajax From Wikipedia">Ajax From Wikipedia</a></li>
</ul>
</div>
</body>
</html>
Title To Note
2008/10/6
Title to note - dhtmlgoodies.com
リンクにマウスオーバーするとa要素のtitle属性の内容を、画像にマウスオーバーするとimg要素のalt属性をツールチップ表示するライブラリです。
設置イメージTitle to noteの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Title to note | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="/content/lib/title-to-note/js/title2note.js"></script>
<style type="text/css" media="screen">
@import "/content/lib/title-to-note/css/title2note.css";
</style>
</head>
<body>
<h1><a href='http://www.dhtmlgoodies.com/index.html?whichScript=title-to-note'>Title to not</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーすると、a要素のtitle属性の内容がツールチップ表示されます。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、<a href="#" title="機械、特にコンピュータとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェース。">ユーザーインターフェース</a>構築技術の総称。
<a href="#" title="JavaScriptなどの<strong>ウェブブラウザ搭載のスクリプト言語</strong>で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）。">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
通信結果に応じて<a href="#" title="DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XML の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" title="Ajax From Wikipedia（http://ja.wikipedia.org/wiki/Ajax）">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
<p>▼画像にマウスオーバーすると、img要素のalt属性の内容がツールチップ表示されます。</p>
<p>
<img src="/content/img/pic1-thumb.png" alt="クリスピー・クリーム・ドーナッツ" title="新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ（Krispy Kreme Doughnuts）」。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！" />
<img src="/content/img/pic2-thumb.png" alt="くまさんケーキ" title="むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写！どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかｗ" />
</p>
</body>
</html>
Tooltip for forms
フォーム要素にツールチップ表示
2008/10/6
Tooltip for forms - dhtmlgoodies.com
［CSS］form-field-tooltip.css
［JS］form-field-tooltip.js、rounded-corners.js
［JS］form-field-tooltip.js、rounded-corners.js
フォーム要素をクリックすると、入力ヒントがバルーン表示するライブラリです。 バルーンの角丸の角の大きさや、バルーン表示を無効にするなど、いろいろな設定が可能です。
設置イメージTooltip for formsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Tooltip for forms | 設置サンプル</title>
<script type="text/javascript" src="/content/lib/form-field-tooltip/js/form-field-tooltip.js"></script>
<script type="text/javascript" src="/content/lib/form-field-tooltip/js/rounded-corners.js"></script>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" href="/content/lib/form-field-tooltip/css/form-field-tooltip.css" media="screen,tv" type="text/css" />
</head>
<body>
<h1><a href='http://www.dhtmlgoodies.com/index.html?whichScript=form-field-tooltip'>Tooltip for forms - dhtmlgoodies.com</a> | 設置サンプル</h1>
<p>▼フォーム要素をクリックすると、入力ヒントがバルーン表示されます。</p>
<form id="userfrm" action="#" onsubmit="return false;">
<fieldset>
<legend>登録情報</legend>
<table>
<tr>
<th><label for="use_name">名前：</label></th>
<td><input type="text" id="use_name" name="use_name" tooltipText="あなたの「名前」を入力してください" size="20" maxlength="256" /></td>
</tr>
<tr>
<th><label for="user_name_kana">名前のフリガナ：</label></th>
<td><input type="text" id="user_name_kana" name="user_name_kana" tooltipText="あなたの「名前のフリガナ」を入力してください" size="20" maxlength="256" /></td>
</tr>
<tr>
<th><label for="address">住所：</label></th>
<td><textarea id="address" name="address" cols="50" rows="3" tooltipText="あなたの「住所」を入力してください"></textarea></td>
</tr>
<tr>
<th><label for="sex">性別：</label></th>
<td>
<label for="sex_1"><input type="radio" id="sex_1" name="sex_1" value="male" toolTipText="あなたの「性別」を選択してください" /> 男性</label>
<label for="sex_2"><input type="radio" id="sex_2" name="sex_2" value="female" toolTipText="あなたの「性別」を選択してください" /> 女性</label>
</td>
</tr>
<tr>
<th><label for="job">職業：</label></th>
<td>
<select id="job" name="job" tooltipText="あなたの職業を選択してください">
<option value="" selected="selected">▼選択してください</option>
<option>自営業</option>
<option>会社員</option>
<option>公務員</option>
<option>パート・アルバイト</option>
<option>専業主婦</option>
<option>学生</option>
<option>その他</option>
</select>
</td>
</tr>
</table>
<p>
<input type="submit" value="送信" class="btn" tooltipText="テストのため、「送信」ボタンをクリックしても送信されません" />
</p>
</fieldset>
</form>
<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEEEEE');
tooltipObj.setTooltipCornerSize(10);
tooltipObj.initFormFieldTooltip();
</script>
</body>
</html>
Tooltip with transparent shadow
2008/10/6
Tooltip with transparent shadow - dhtmlgoodies.com
著作権表示をすれば無償で使える。
リンクのマウスオーバー及びマウスアウトのイベントで、バルーンの表示・非表示を切り替えています。 バルーンに表示するテキストは、マウスオーバー時のイベント発生時にコールする関数に文字列で指定します。
設置イメージTooltips with transparent shadowの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Tooltip with transparent shadow | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style type="text/css">
#dhtmlgoodies_tooltip{
background-color:#EEE;
border:1px solid #000;
position:absolute;
display:none;
z-index:20000;
padding:2px;
font-size:0.9em;
-moz-border-radius:6px; /* Rounded edges in Firefox */
}
#dhtmlgoodies_tooltipShadow{
position:absolute;
background-color:#555;
display:none;
z-index:10000;
opacity:0.7;
filter:alpha(opacity=70);
-khtml-opacity: 0.7;
-moz-opacity: 0.7;
-moz-border-radius:6px; /* Rounded edges in Firefox */
}
</style>
<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Updated:
March, 11th, 2006 - Fixed positioning of tooltip when displayed near the right edge of the browser.
April, 6th 2006, Using iframe in IE in order to make the tooltip cover select boxes.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var dhtmlgoodies_tooltip = false;
var dhtmlgoodies_tooltipShadow = false;
var dhtmlgoodies_shadowSize = 4;
var dhtmlgoodies_tooltipMaxWidth = 200;
var dhtmlgoodies_tooltipMinWidth = 100;
var dhtmlgoodies_iframe = false;
var tooltip_is_msie = (navigator.userAgent.indexOf('MSIE')>=0 && navigator.userAgent.indexOf('opera')==-1 && document.all)?true:false;
function showTooltip(e,tooltipTxt){
var bodyWidth = Math.max(document.body.clientWidth,document.documentElement.clientWidth) - 20;
if(!dhtmlgoodies_tooltip){
dhtmlgoodies_tooltip = document.createElement('DIV');
dhtmlgoodies_tooltip.id = 'dhtmlgoodies_tooltip';
dhtmlgoodies_tooltipShadow = document.createElement('DIV');
dhtmlgoodies_tooltipShadow.id = 'dhtmlgoodies_tooltipShadow';
document.body.appendChild(dhtmlgoodies_tooltip);
document.body.appendChild(dhtmlgoodies_tooltipShadow);
if(tooltip_is_msie){
dhtmlgoodies_iframe = document.createElement('IFRAME');
dhtmlgoodies_iframe.frameborder='5';
dhtmlgoodies_iframe.style.backgroundColor='#FFFFFF';
dhtmlgoodies_iframe.src = '#';
dhtmlgoodies_iframe.style.zIndex = 100;
dhtmlgoodies_iframe.style.position = 'absolute';
document.body.appendChild(dhtmlgoodies_iframe);
}
}
dhtmlgoodies_tooltip.style.display='block';
dhtmlgoodies_tooltipShadow.style.display='block';
if(tooltip_is_msie)dhtmlgoodies_iframe.style.display='block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
var leftPos = e.clientX + 10;
dhtmlgoodies_tooltip.style.width = null; // Reset style width if it's set
dhtmlgoodies_tooltip.innerHTML = tooltipTxt;
dhtmlgoodies_tooltip.style.left = leftPos + 'px';
dhtmlgoodies_tooltip.style.top = e.clientY + 10 + st + 'px';
dhtmlgoodies_tooltipShadow.style.left = leftPos + dhtmlgoodies_shadowSize + 'px';
dhtmlgoodies_tooltipShadow.style.top = e.clientY + 10 + st + dhtmlgoodies_shadowSize + 'px';
if(dhtmlgoodies_tooltip.offsetWidth>dhtmlgoodies_tooltipMaxWidth){ /* Exceeding max width of tooltip ? */
dhtmlgoodies_tooltip.style.width = dhtmlgoodies_tooltipMaxWidth + 'px';
}
var tooltipWidth = dhtmlgoodies_tooltip.offsetWidth;
if(tooltipWidth<dhtmlgoodies_tooltipMinWidth)tooltipWidth = dhtmlgoodies_tooltipMinWidth;
dhtmlgoodies_tooltip.style.width = tooltipWidth + 'px';
dhtmlgoodies_tooltipShadow.style.width = dhtmlgoodies_tooltip.offsetWidth + 'px';
dhtmlgoodies_tooltipShadow.style.height = dhtmlgoodies_tooltip.offsetHeight + 'px';
if((leftPos + tooltipWidth)>bodyWidth){
dhtmlgoodies_tooltip.style.left = (dhtmlgoodies_tooltipShadow.style.left.replace('px','') - ((leftPos + tooltipWidth)-bodyWidth)) + 'px';
dhtmlgoodies_tooltipShadow.style.left = (dhtmlgoodies_tooltipShadow.style.left.replace('px','') - ((leftPos + tooltipWidth)-bodyWidth) + dhtmlgoodies_shadowSize) + 'px';
}
if(tooltip_is_msie){
dhtmlgoodies_iframe.style.left = dhtmlgoodies_tooltip.style.left;
dhtmlgoodies_iframe.style.top = dhtmlgoodies_tooltip.style.top;
dhtmlgoodies_iframe.style.width = dhtmlgoodies_tooltip.offsetWidth + 'px';
dhtmlgoodies_iframe.style.height = dhtmlgoodies_tooltip.offsetHeight + 'px';
}
}
function hideTooltip(){
dhtmlgoodies_tooltip.style.display='none';
dhtmlgoodies_tooltipShadow.style.display='none';
if(tooltip_is_msie)dhtmlgoodies_iframe.style.display='none';
}
</script>
</head>
<body>
<h1><a href="http://www.dhtmlgoodies.com/index.html?whichScript=tooltip_shadow">Tooltip with transparent shadow - dhtmlgoodies.com</a> | 設置サンプル</h1>
<p>リンクにマウスオーバーすると影付きでツールチップを表示します。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<h2>Ajax</h2>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" onmouseout="hideTooltip()" onmouseover="showTooltip(event,'JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）');return false">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" onmouseout="hideTooltip()" onmouseover="showTooltip(event,'DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。');return false;">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" onmouseout="hideTooltip()" onmouseover="showTooltip(event,'Extensible Markup Language （エクステンシブルマークアップランゲージ）。');return false;">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" onmouseout="hideTooltip()" onmouseover="showTooltip(event,'Ajax From Wikipedia');return false;">Ajax From Wikipedia</a></cite>
</blockquote>
</body>
</html>
Unobtrusive and Slightly Accessible CSS Tool Tips on Semi Transparent CSS Menus
2008/10/6
Unobtrusive and Slightly Accessible CSS Tool Tips on Semi Transparent CSS Menus
Firefox 1.04 Mac, Mozilla 1.7.8 Mac、Safari 1.3、Shiira 0.9.5、Opera 8.01 Mac (UA tool tips occur with mouse events)、Firefox 1.04 WinIE 6 Win
著作権表示
［CSS］b.css
［JS］dom_evt.js、v_1.3.js
［JS］dom_evt.js、v_1.3.js
透過PNGを利用してスケルトンなツールチップを表示するライブラリ。 IE6だと画面の端でツールチップ表示すると、縦長になったりしまうのが難点。
設置イメージUnobtrusive and Slightly Accessible CSS Tool Tipsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Unobtrusive and Slightly Accessible CSS Tool Tips on Semi Transparent CSS Menus | 設置サンプル</title>
<script type="text/javascript" src="/content/lib/twtooltipmanager/dom_evt.js"></script>
<script type="text/javascript" src="/content/lib/twtooltipmanager/v_1.3.js"></script>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" type="text/css" href="/content/lib/twtooltipmanager/b.css" />
<style type="text/css">
#debug {
padding:2px 5px;
background:#f5f5f5;
}
#tip {
z-index:100;
position:absolute;
border:0;
padding:0 6px 5px 0;
background:transparent url("/content/lib/twtooltipmanager/bgs.png") no-repeat bottom right;
color:#000;
display:none;
}
/* get out of jail card for IE */
* html #tip {
background:transparent;
}
* html #tip * {
background:#fff;
}
#tip * {
background:transparent url("/content/lib/twtooltipmanager/bg.png") repeat;
}
#tip div {
position:relative;
top:-5px;
left:-5px;
border:1px solid #999;
padding:5px;
}
</style>
</head>
<body>
<h1><a href='http://css.experiments.severnsolutions.co.uk/dhtml/tooltips/'>Unobtrusive and Slightly Accessible CSS Tool Tips on Semi Transparent CSS Menus</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーするとツールチップが表示されます。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。
<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="tooltip" title="JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="tooltip" title="DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" class="tooltip" title="Extensible Markup Language （エクステンシブルマークアップランゲージ）。">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="tooltip" title="Ajax From Wikipedia">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
debug:<span id="debug"></span>
</body>
</body>
</html>
websnapr - Preview Bubble Javascript v2.0
2008/10/6
websnapr - Preview Bubble Javascript v2.0
developer keyの取得（無料）
previewbubble.js
リンクにマウスオーバーするとリンク先のスクリーンショットをサムネイル表示するライブラリです。
まず、サイトから「previewbubble.zip」をダウンロードします。
次に、「previewbubble.js」内の「bg.png」という画像のパスを適宜に変更し、ページのhead要素内で「previewbubble.js」を読み込みます。
あとは、リンク先をバルーン表示したいリンク（a要素）にclass='previewlink'を指定するだけで設置できます。
設置イメージwebsnapr - Preview Bubble Javascript v2.0の設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>websnapr - Preview Bubble Javascript v2.0 | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="/content/lib/previewbubble/previewbubble.js"></script>
</head>
<body>
<h1><a href='http://www.websnapr.com/previewbubble/'>websnapr - Preview Bubble Javascript v2.0</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーするとリンク先のスクリーンショットをサムネイル表示します。</p>
<ul>
<li><a class="previewlink" href="http://www.yahoo.co.jp/">Yahoo!Japan</a></li>
<li><a class="previewlink" href="http://www.google.co.jp/">Google</a></li>
<li><a class="previewlink" href="http://japan..com/">CNET Japan</a></li>
</ul>
</body>
</html>
wg:Bubble Tooltips
2008/10/6
wg:Bubble Tooltips
IE5, IE5.5 and IE6 on Win, Opera 8.5, Safari 2.0 and Firefox 1.5
BubbleTooltips.js
超軽量（2KB）のバルーン表示JSライブラリ。 a要素のリンク先やリンク先の説明文をバルーン表示したいという用途に最適！
「BubbleTooltips.js」を外部JSとしてhead要素内で読み込み、あとは通常のリンクの記述だけでバルーン表示が実装できます。
a要素のtitle属性を省略または空にした場合、バルーン内には「lnk:」という表記＋a要素のhref属性に指定したURLが表示されます。 「lnk:」以外の任意のテキストを表示したい場合は、a要素のtitle属性に表示したいテキストを指定します。 HTMLタグは指定できません。
JS不使用の画像とCSSだけのバルーン表示サンプルも同梱されています。
設置イメージ（JSライブラリ使用）
設置イメージ（画像＋CSSのみ）wg:Bubble Tooltipsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>wg:Bubble Tooltips | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style type="text/css">
.tooltip,.tooltip * { display:block; } /*added by javascript*/
.tooltip { width: 200px; color:#000; font:lighter 11px/1.3 Arial,sans-serif; text-decoration:none;text-align:center; }
.tooltip span.top { padding:30px 8px 0; background:url("/content/lib/wg_bubble_tooltips/bt.gif") no-repeat top; }
.tooltip b.bottom { padding:3px 8px 15px;color: #548912; background: url("/content/lib/wg_bubble_tooltips/bt.gif") no-repeat bottom; }
</style>
<script type="text/javascript" src="/content/lib/wg_bubble_tooltips/BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){ enableTooltips() };
</script>
</head>
<body>
<h1><a href="http://web-graphics.com/mtarchive/001717.php">wg:Bubble Tooltips</a> | 設置サンプル</h1>
<h2>JSライブラリ使用</h2>
<p>▼リンクにマウスオーバーするとツールチップを表示します。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" title="JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" title="DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" title="Extensible Markup Language （エクステンシブルマークアップランゲージ）。">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" title="Ajax From Wikipedia">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
<h2>画像＋CSSのみ</h2>
<div style="background:transparent url(/content/img/pic1.png) no-repeat 0 0; width:320px; height:240px; overflow:hidden;position:relative;">
<div style="position:absolute;top:50%; left:30px; width:200px;">
<span class="tooltip">
<span class="top">1時間20分も並んで購入！ドーナツはピザみたいな箱にいれてくれます。</span>
<b class="bottom"><a href="http://krispykreme.jp/index.html">クリスピー・クリーム・ドーナツ</a></b>
</span>
</div>
</div>
</body>
</html>
Yahoo! UI Library: Tooltip
YUI使用
2008/10/6
Yahoo! UI Library: Tooltip
［CSS］
yui/build/container/assets/container.css
［JS］
yui/build/yahoo-dom-event/yahoo-dom-event.js
yui/build/animation/animation-min.js
yui/build/container/container-min.js
yui/build/container/assets/container.css
［JS］
yui/build/yahoo-dom-event/yahoo-dom-event.js
yui/build/animation/animation-min.js
yui/build/container/container-min.js
要素にマウスオーバーするとツールチップを表示するライブラリ。 ツールチップ内容やスタイルはすべてパラメータで指定します。 ツールチップのの内容にはHTML文も指定できます。
/* 画像にマウスオーバーでツールチップを表示する場合 */
<p><img id='任意のID名' src='/content/img/pic1-thumb.png' /></p>
<script type='text/javascript'>
var オブジェクト名 = new YAHOO.widget.Tooltip('オブジェクト名', {
context:'任意のID名',
text:'ツールチップの内容',
width:'450px',
showDelay:500 } );
</script>
設置イメージ
設置イメージYahoo! User Interface Library - Tooltipの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Yahoo! UI Library: Tooltip | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/yui/build/container/assets/container.css">
<style type="text/css">
/* Popup Balloons */
.hidden { display:none; }
</style>
<!-- Dependencies -->
<script type="text/javascript" src="/content/lib/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<!-- OPTIONAL: Animation (only required if using ContainerEffect) -->
<script type="text/javascript" src="/content/lib/yui/build/animation/animation-min.js"></script>
<!-- Source file -->
<script type="text/javascript" src="/content/lib/yui/build/container/container-min.js"></script>
</head>
<body>
<h1><a href='http://developer.yahoo.com/yui/container/tooltip/'>Yahoo! UI Library: Tooltip</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーするとツールチップが表示されます。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" id="myContextEl_XMLHttpRequest">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" id="myContextEl_DHTML">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XMLの略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" id="myContextEl_cite">Ajax From Wikipedia</a></cite>
</dd>
</dl>
</blockquote>
<br>
<p>▼画像にマウスオーバーするとツールチップが表示されます。</p>
<p><img id="myContextEl" src="/content/img/pic1-thumb.png" alt="クリスピー・クリーム・ドーナッツ" /></p>
<script type="text/javascript">
var myTooltip = new YAHOO.widget.Tooltip("myTooltip", {
context:"myContextEl",
text:"新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ（Krispy Kreme Doughnuts）」。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！",
width:"430px",
showDelay:500 } );
var myTooltip_XMLHttpRequest = new YAHOO.widget.Tooltip("myTooltip_XMLHttpRequest", {
context:"myContextEl_XMLHttpRequest",
width:"400px",
text:"JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）",
showDelay:500 } );
var myTooltip_DHTML = new YAHOO.widget.Tooltip("myTooltip_DHTML", {
context:"myContextEl_DHTML",
width:"400px",
text:"DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。",
showDelay:500 } );
var myTooltip_cite = new YAHOO.widget.Tooltip("myTooltip_cite", {
context:"myContextEl_cite",
width:"400px",
text:'<img src="/content/img/ajax/wikipedia.png" style="margin:0 5px 5px 5px;" align="left" alt="" />ウィキペディア フリー百科事典<br>http://ja.wikipedia.org/wiki/Ajax',
showDelay:500 } );
</script>
</body>
</html>
UniTip
半透明の角丸ツールチップ、qTipベース
2008/10/6
UniTip
qTipベースの半透明の角丸ツールチップを表示するJSライブラリ。 クラス名（left、right）で吹き出しの位置を簡単に変更できます。 ルーツチップの内容にHTML文を記述することができます。
設置イメージUniTipの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>UniTip | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css">
<link rel="stylesheet" href="/content/lib/unitip/css/unitip.css" type="text/css" media="screen" />
<script type="text/javascript" src="/content/lib/unitip/js/unitip.js"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="/content/lib/unitip/js/unitpngfix.js"></script>
<style type="text/css">
.cf {height:1px;}
</style>
<![endif]-->
<style type="text/css">
/* overwrite */
#unitip { font-size:.8em; }
</style>
</head>
<body>
<h1><a href='http://labs.unitinteractive.com/unitip.php'>UniTip</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーするとツールチップが表示されます。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<dl>
<dt>Ajax</dt>
<dd>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="right tip" title="<strong>XMLHttpRequest</strong><br>JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="right tip" title="<strong>DHTML</strong><br>DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XMLの略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="right tip" title="<img src='/content/img/ajax/wikipedia.png' align='left' alt='' />ウィキペディア フリー百科事典<br>http://ja.wikipedia.org/wiki/Ajax');">出典: フリー百科事典『ウィキペディア（Wikipedia）』</a></cite>
</dd>
</dl>
</blockquote>
<p>▼画像にマウスオーバーするとツールチップが表示されます。</p>
<p><img class="left tip" title="<strong>クリスピー・クリーム・ドーナツ</strong><br>新宿高島屋のサザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん<strong>「クリスピー・クリーム・ドーナツ」</strong>。ドーナツの箱がピザの箱みたいで、味もアメリカン！ビジュアルから行ってさぞかし劇甘なんだろうなと思ったけど、意外とほどよい甘さ。生地はかなりソフトなので固めでサクサクしたドーナツが好きな人にはおすすめできないかもｗ" src="/content/img/pic1-thumb.png" alt="クリスピー・クリーム・ドーナッツ" /></p>
</body>
</html>