今回は、再びTooltipを実装してみたいと思います。
自分の作成した任意のhtmlファイルそのものを表示させるTooltipです。
[dhtmlgoodies.com – Ajax tooltip]
http://www.dhtmlgoodies.com/index.html?whichScript=ajax-tooltip
[Download script]You can download the entire script from this Zip file から
必要なファイルを一括ダウンロードできます。
デモページも同胞されていますが、自分のページに実装する場合に必要となるのは
以下の3javascriptファイルと1cssファイル(+1イメージファイル)です。
<script type="text/javascript" src="/ajax-dynamic-content.js"></script>
<script type="text/javascript" src="xxxx/ajax.js"></script>
<script type="text/javascript" src="xxxx/ajax-tooltip.js"></script>
<link rel="stylesheet" href="xxxx/ajax-tooltip.css" media="screen" type="text/css">
【実装方法】
1.Tooltipで表示させたいhtmlファイルを用意します。
サンプルをみたところ、<html></html>で囲まれたファイルではありません。
完成したhtmlでなく、部品としてのhtmlとなります。
（あくまでも、読み込んで本体htmlに埋め込む、というイメージです）
2.Tooltip表示をしたい部分にスクリプトを追加します。
マウスオーバー時に[ajax_showTooltip]ファンクションを実行させ、
マウスアウト時に[ajax_hideTooltip]ファンクションが実行されるよう、
オブジェクトにイベントを追加します。
（Aタグ-リンクオブジェクトの場合)
<a href="[リンク先]" onmouseover="ajax_showTooltip('[表示させたいhtmlの相対パス]',this);return false" onmouseout="ajax_hideTooltip()">
サンプル用に簡単な画面を作成しました。
サンプルでわかるように、aタグだけでなく、
imgやdivオブジェクトのonmouseoverイベントにも使用可能です。
★注意1
IE（IE6)ではうまく動かないようです。
バルーン表示はされますが、中のサイトが表示されません・・・。
★注意2
引数に指定できるURLは本体htmlからの相対パスです。
httpから始まるURLは使用できません。
★注意3
Tooltipとして表示させたいhtmlはあくまでも本体から読み込むhtmlの部品（一部）となります。
そのため、Tooltip用htmlと本体htmlを異なるパスに設置させる場合、
画像のsrcなどは、本体htmlからの相対パスを指定するようにします。
ここに書かれていることが参考になると思います。
★注意4
ajax.jsで使用されるリクエストが、デフォルトでPOST設定になっているため、
バルーン部分に、
「405 Method Not Allowed」
とhttpエラーが表示されて、Tooltipが表示できない場合があります。
POSTメソッドによる呼び出しを使用する事を禁止している場合があります。
（XMLHttpRequestのメソッドタイプがPOSTだと自分のサーバーでエラーとなりました。）
メソッドタイプをPOSTからGETに変更するためには、ajax.jsの9行目
this.method = "POST";をthis.method = "GET";と書き換えてください。（・・・かなりはまりました。）