Javascript 　SVGのツールチップを表示する - インストールレスプログラミング( ´ー`)

さんざん悩んでいたものが解消したので，備忘録

SVGで図形の上に来た時に任意の値を表示したいというもの。
titleとかを使えば似たようなものはできたりしますし，svgの直後に文字をつけてCSSでなんとかする手もありました。でも制約がけっこうあり，不満でした。
やっと満足ができるものになったので載せます。

SVGの図形部分もJavaScriptで書けるわけですが，そこは情報がかなり豊富なのでいいとして，ツールチップのとこが今回の本題です。

<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #label {
            padding: 3px;
            background-color: beige;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="label"></div>
    <svg width="400" height="200">
        <rect id="a" x="10" y="10" width="80" height="80" fill="yellow" onclick="Name()"
        onmouseover="call()" onmousemove="point()" onmouseout="hidelabel()" data-label="aa"></rect>
        <rect id="b" x="100" y="10" width="80" height="80" fill="pink" onclick="Name()"
        onmouseover="call()" onmousemove="point()" onmouseout="hidelabel()" data-label="bb"></rect>
        <rect id="c" x="300" y="10" width="80" height="80" fill="blue" onclick="Name()"
         onmouseover="call()" onmousemove="point()" onmouseout="hidelabel()" data-label="箱だよ"></rect>
    </svg>
    <script>
        var labeldiv = document.getElementById("label")
        function Name() {
            alert(event.target.getAttribute("id"))
        }

        function point() {
            X = event.x + document.body.scrollLeft
            Y = event.y + document.body.scrollTop
            labeldiv.style.left = X + 10 + "px"
            labeldiv.style.top = Y + "px"
        }

        function call() {
            labeldiv.style.display = "block"
            labeldiv.innerText = event.target.getAttribute("data-label")
        }

        function hidelabel() {
            labeldiv.style.display = "none"
        }
    </script>
</body>

</html>

説明です。
labelというidのdivがツールチップの本体となります。absolute指定しているので，自由に配置できます。
書式はcss部分で自由に変更可能。
図形の上にマウスカーソルが行ったとき onmouseoverに指定している関数が呼び出されます。各四角のdata-label属性を読み取ってlabelの文字列を書き換えます。

図形上を動いているときはonmousemoveに指定している関数が呼び出されます。
マウス位置を読み取ってそれでlabelのdivの座標を修正しています。定位置にするなら図形の座標を読み取ってうまく指定すればいいかな。

そして図形から離れるときはonmouseoutが呼び出されてdivを非表示にします。

とてもシンプルに書けてスムーズに動いてくれる。

これはhtaとして保存してもちゃんと動きます。htaで試す方はメモ帳にはりつけて UTF-8で保存しましょう。

グラフの各パーツの説明をこのやり方でやるようになり，満足がいくところに来ました。

javascriptすげーの日々はまだ続いています。htaにもそのまま使えるのでほんと助かる。。