javascript - 純粋な Javascript を使用したカスタム ツールチップの基本的な考え方

Question

純粋なJavascriptコードを使用してカスタム ツールチップを作成する基本的なアイデアが必要です。

私が欲しいもの:

例えば ​​：

<a href="#" onmousemover="tooltip('text')">Link Text</a>

そして、要素から、または要素から開始するために、の要素に基づいてonmouseoverカスタムツールチップを表示したいと思います。fixed position<a>positionright:0left:0<a>

Answer 1

次のような関数が必要です。

function tooltip(text, element) {

    var offsetDistance = 20;

    tt = document.getElementById('ttdiv');
    elem = document.getElementById(element.id);
    tt.style.top = elem.offsetTop + offsetDistance + 'px';
    tt.style.left = elem.offsetLeft + offsetDistance + 'px';
    tt.style.display = 'block';
    tt.innerHTML = text;
}

ツールチップ div の ID はどこttdivにあり、最初は に設定されていdisplay:noneます。がトリガーされたときにツールチップを非表示にするには、付随するhide()関数が必要です。onmouseout

これは動作中のJSFiddleです。