ajax-tooltip.js でマウスアウトしても吹き出しが消えないように改造 ( ラボブログ )

ラボ神部です。

ちょっと機会が会ったので、ajax-tooltip.js の設定方法と、マウスアウトしても吹き出しが消えない方法についてまとめたのでブログにコピペしておきます。便利ですよ！

▼1.ライブラリの取得

Ajax tooltip
http://www.dhtmlgoodies.com/index.html?whichScript=ajax-tooltip

に行き、次の zip ファイルを取得
http://www.dhtmlgoodies.com/scripts/ajax-tooltip/ajax-tooltip.zip

▼2.フォルダの配置

zip ファイルを解凍し、任意の場所に、css, images, js フォルダを配置
（できればコンテンツのルートフォルダに）

▼3.HTML に追加

ポップアップを使用したいページのヘッダ（の間）に、下記の行を追加する

<script type="text/javascript" src="/js/ajax-dynamic-content.js">
<script type="text/javascript" src="/js/ajax.js">

<script type="text/javascript" src="/js/ajax-tooltip.js">
/**********************************
(C) www.dhtmlgoodies.com, June 2006
***********************************/
</script>
<link rel="stylesheet" href="/css/ajax-tooltip.css" media="screen" type="text/css">

また、ポップアップさせたいオブジェクトをタグで囲い、下記のように設定する

<a href="#" onmouseover="ajax_showTooltip('（リンク先ファイルの相対パス）',this);return false" onmouseout="ajax_hideTooltip()">リンクテキスト

※ # の代わりにリンク先を設定することも出来ます。

▼4.メソッドの変更

うまく動作しなければ、

ajax.jsの9行目

this.method = "POST";

を

this.method = "GET";

と書き換えてください。

▼5.タイマーの設定

デフォルトだとマウスがリンク先からはずれるとポップアップが
消えてしまうので、タイマーを設定します。

ajax-tooltip.js を開き、

function ajax_hideTooltip()
ajax_tooltipObj.style.display='none';
}

となっているところを探し、下記のように書き換えてください。

function ajax_hideTooltip()
{
var tid=setTimeout(hide,3000);
}

function hide(){
ajax_tooltipObj.style.display='none';
}

以上です。