指定の要素にマウスをのせた時に、ツールチップを表示するJavaScriptを作成しました。
ライブラリの前提で作ってみましたが、正直な話としてライブラリにする必要性が
全く無いほど短いですが、簡単なものから作成していきます。
動作のイメージは、次の図のような感じです。「こちらが２個目です」の文字に
マウスを乗せると、赤い背景の「2個目です。」が表示されます。
ソースコードは、次のリンクからダウンロードして下さい。
※ダウンロードされない場合は、次のリンクを開いて下さい。
使い方は、onloadなどの時に次のように指定するだけです。
window.onload = function () {
new tooltips(document.getElementById(‘inp01’), ‘1個目’);
new tooltips(document.getElementById(‘inp02’), ‘2個目
です。’);
}
また、要素自体は次のように指定して下さい。
<div id=”tooltip” style=”background-color: red; color: white; display: none; position: absolute; z-index: 88888; width: fit-content;”>
<a id=”inp01″>こちらが１個目です
<br /><br /><br />
<a id=”inp02″>こちらが２個目です
javascriptのonloadイベントの中で、
new tooltips([[要素名]] , [[表示するメッセージ]]);
と指定するだけです。
ツールチップの書式は、自分のお好みに合わせて下さい。
表示の中で改行するにはどうするのか？といった質問が出ないように、
「inp02」の方は改行を含んだ表示としました。