オリジナルツールチップ
要素にtitle属性を付けるとツールチップ(説明文のようなもの)が表示されます。
今回はこのツールチップとは別に独自のツールチップを作成してみました。
次の文章にマウスカーソルを乗せるとサンプルを表示します。
サンプル1
サンプル2
以下、ツールチップを表示させるためのスクリプトです。
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]='文章'; という具合に
順次増やしてください。
ツールチップを表示させる要素には次のように
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>