javascript - div を別の div に相対的に配置する: SVG の問題

Question

示されているように、他の 2 つの div、div_CanvasHeader と div_Canvas を含む id="div_Diagram" を持つ div があります。div_Canvas には SVG も含まれており、これにはいくつかの四角形が含まれています。各四角形は、スクリプトに渡された x & y 位置値を使用して、マウスオーバー イベントに添付された JavaScript スクリプトを持つように構築されます。

svgs の性質上、四角形に対してツールチップの分割を正しく配置できません。rect 座標 (x&y) を使用して、div_CanvasHeader または div_Diagram を基準にしてツールチップを配置できるようにしたいと考えています。x と y 以外のすべての寸法は固定されています。

これがジャバスクリプトです。(ツールチップは Telerik コントロールであることに注意してください。Show() メソッドは、すべての正しいコンテンツを含むツールチップをページの左下に表示します)。

function showSVGTtip(elt, x, y) {

        if (elt.hasAttribute("name")) {

            var ttipText = elt.getAttribute("ttipText ");

            var ttip = $find("<%=myToolTipDiv.ClientID %>");

            document.getElementById("ttipLabel").innerHTML = ttipText ;
            ttip.show();

            // Need to set position of ttip relative to other element such as pnlCanvasHeader
        }
    }

ツールチップ div を他の div の 1 つに対して相対的に配置するにはどうすればよいですか? たとえば、ツールチップ div の ID を持っている場合、それをクライアント上で div_CanvasHeader に相対的に移動できますか? ツールチップは他の div 内に含める必要がありますか?