オリジナルツールチップ

要素にtitle属性を付けるとツールチップ(説明文のようなもの)が表示されます。 今回はこのツールチップとは別に独自のツールチップを作成してみました。 次の文章にマウスカーソルを乗せるとサンプルを表示します。

サンプル1 サンプル2

※ IE5.5以下は document.getElementsByTagName("*") が効かない(lengthは0を返す) ようですので、 このスクリプトではIEは6以上のバージョンを対象とします。 IE5〜5.5にも対応しました。
2007/09/07 IE6以下だけ動作がおかしかったのは当サイトの外部jsファイルに問題が あったようです。(本当はIEという出来の悪いブラウザが問題なわけですが)

以下、ツールチップを表示させるためのスクリプトです。 head要素内に置いてください。

<script type="text/javascript"><!--
// Original tooltips.
// (C)2007 Amenti. http://amenti.usamimi.info/
// 2007/09/07 update.(fix for IE)
// 2007/09/02 update.(support for IE5.x)
// 2007/09/01 update.
// 2007/08/31 release.
// Terms of use: Keep to copyright. No claim. No support.
var orig_tooltips_width="100px"; // ツールチップの幅の初期値
ott=new Array();
ott[0]='マウスカーソルを乗せるとこのようにツールチップを表示します';
ott[1]='このツールチップは赤系の色で破線枠となっていますが、'
 +'ページに合わせて好みの色を使用することが出来ます。';

if (window.addEventListener)
 window.addEventListener("load",orig_tooltips_init,false);
else if (window.attachEvent && document.getElementById)
 window.attachEvent("onload",orig_tooltips_init);

function orig_tooltips_init() {
 var tooltip=document.createElement("div");
 tooltip.style.fontSize="10px"; // 文字サイズ
 tooltip.style.color="#f00"; // 文字色
 tooltip.style.background="#ffc0cb"; // 背景
 tooltip.style.border="dashed 1px #ff69b4"; // ボーダー(枠)
 tooltip.style.lineHeight="1.2em"; // 行間
 tooltip.style.padding="4px";
 tooltip.style.margin="0";
 tooltip.style.width=orig_tooltips_width;
 tooltip.style.position="absolute";
 tooltip.style.zIndex="5000";
 tooltip.style.display="none";
 tooltip.setAttribute("id","orig_tooltip");
 document.body.appendChild(tooltip);
 var tn=document.getElementsByTagName("*");
 if (tn.length == 0) tn=orig_tooltips_get_elms(document.body);
 for (var i=0; i < tn.length; i++) if (tn[i].getAttribute("onmouseover") &&
  tn[i].getAttribute("onmouseover").toString().match(/orig_tooltips_show[(]/)) {
   if (tn[i].addEventListener) {
    tn[i].addEventListener("mouseout",orig_tooltips_hide,false);
    tn[i].addEventListener("mousemove",orig_tooltips_move,false);
    tn[i].style.cursor="pointer";
   }
   else if (tn[i].attachEvent) {
    tn[i].attachEvent("onmouseout",orig_tooltips_hide);
    tn[i].attachEvent("onmousemove",orig_tooltips_move);
    tn[i].style.cursor="hand";
    if (tn[i].nodeName == "IMG" && tn[i].alt && !tn[i].title) tn[i].title="";
    else if (tn[i].nodeName == "AREA" && tn[i].alt) tn[i].alt="";
   }
 }
}

function orig_tooltips_get_elms(elm) {
 list=new Array();
 if (!elm) return list;
 list[list.length]=elm;
 var cn=elm.childNodes;
 for (var i=0; i < cn.length; i++) if (cn[i].attributes)
  list=list.concat(orig_tooltips_get_elms(cn[i]));
 return list;
}

function orig_tooltips_show(evt,msg,width) {
 var tooltip=document.getElementById("orig_tooltip");
 if (evt.target) var elm=evt.target;
 else var elm=window.event.srcElement;
 if (tooltip.style.display == "none") {
  if (width) tooltip.style.width=width;
  else tooltip.style.width=orig_tooltips_width;
  tooltip.innerHTML=msg;
 }
 tooltip.style.display="inline";
}

function orig_tooltips_hide() {
 var tooltip=document.getElementById("orig_tooltip");
 tooltip.style.display="none";
}

function orig_tooltips_move(evt) {
 var tooltip=document.getElementById("orig_tooltip");
 if (evt.target) var elm=evt.target;
 else var elm=window.event.srcElement;
 if (window.event) {
  if (!evt) var evt=window.event;
  if (!evt.pageX) evt.pageX=evt.clientX+document.body.scrollLeft;
  if (!evt.pageY) evt.pageY=evt.clientY+document.body.scrollTop;
 }
 tooltip.style.left=evt.pageX+"px";
 tooltip.style.top=evt.pageY+22+"px";
}
// --></script>

簡単に説明しますと、div要素を作成して中に文章を入れ、目的の要素にマウスカーソル が乗ったときに表示させているだけです。 また、mousemoveの辺りはマウスストーカーと ほぼ同じです。 その他、初期化の部分でonmouseoverにorig_tooltips_show()の指定されている要素には onmouseout="orig_tooltips_hide();" 及び onmousemove="orig_tooltips_move(event);" を自動的に追加するようにしてあります。 それから、img要素やarea要素に適用する場合、IEはalt属性を通常のツールチップ として表示してしまいますので、img要素は空のtitle属性を付加し、area要素は alt属性値を空にするようにしました。

最初の辺りの変数ott[0]、ott[1]はツールチップ内に表示させる文章を入れています。 ツールチップを増やすときは単純に ott[2]='文章'; ott[3]='文章'; という具合に 順次増やしてください。
※ 文章の途中で改行させて記述したい場合はott[1]のように ott[1]='文章'+'文章'; として + の直前または直後で改行して記述します。 (引用符'〜'内の途中で改行入れるとエラーとなります)
※ ツールチップ内の文章に改行を入れて表示させる場合は文章中に <br> でOKです。(勿論img要素なども挿入可)

ツールチップを表示させる要素には次のように
onmouseover="orig_tooltips_show(event,ott[番号],'ツールチップの幅');"
の属性を付けてください。

<span onmouseover="orig_tooltips_show(event,ott[0],'80px');"> サンプル1 </span>
<span onmouseover="orig_tooltips_show(event,ott[1],'150px');"> サンプル2 </span>

※ orig_tooltips_show()の第3引数 'ツールチップの幅' は省略可能です。 省略すると初期値100pxになります。