title属性にツールチップが表示されるイベントはありますか？

Question

それでは、私はtitle属性で、このスパンを持っているとしましょう：

<span title="Tooltip" id="mySpan">Span</span>

これは、ツールチップがうまく示しているが、私はときのイベントリスナーのいくつかの種類を添付したいのですがタイトルはJavaScriptまたはJQueryで表示されます。例えば何か（明らか"title"が有効なイベントではありません）のような：

document.getElementById("mySpan").addEventListener("title", function() { 
    console.log("Tooltip shown"); 
}); 

---

私はJavaScriptで自分のツールチップを作成することができることを知っていて、このようなmouseoverイベント：

document.getElementById("mySpan").addEventListener("mouseover", function (event) { 
 
    console.log("Tooltip shown"); 
 
    document.getElementById("myTooltip").style.display = 'block'; 
 
    document.getElementById("myTooltip").style.top = (event.clientY + 5) + 'px'; 
 
    document.getElementById("myTooltip").style.left = (event.clientX + 5) + 'px'; 
 
}); 
 

 
document.getElementById("mySpan").addEventListener("mouseout", function() { 
 
    document.getElementById("myTooltip").style.display = 'none'; 
 
});

#myTooltip { 
 
    position: absolute; 
 
    background-color: lightgray; 
 
    padding: 2px 4px; 
 
    font-size: 10px; 
 
}

<span id="mySpan">Span</span> 
 
<span id="myTooltip" style="display: none;">Tooltip</span>

これは、title属性のスタイルをゼロから再作成する必要があることを意味します。ブラウザーからブラウザー、そしてOSからOSへ、私は実際には、ユーザーが見慣れていた標準的なツールチップを変更しないであろう。

---

ので、要約すると、それはtitleが表示さ属性際のイベントリスナーのいくつかの並べ替えを取り付けることができますか？

Answer 1

免責事項を使用することができます。これは、実際にイベントリスナーではありません。

これは最高の解決策ではありませんが、機能します。それはmouseoverのsetTimeoutを0.5秒間（試行錯誤に基づいており、どのドキュメントでも見つからない）から開始し、mouseoutのときにキャンセルします。それは私のために働いていますが、ブラウザ/ OSに基づいて遅延が変わるとうまくいかないかもしれません。

var titleShowTimeout; 
 
document.getElementById("mySpan").addEventListener("mouseover", function (event) { 
 
    titleShowTimeout = setTimeout(function() { 
 
     console.log("Tooltip shown"); 
 
    }, 500); 
 
}); 
 

 
document.getElementById("mySpan").addEventListener("mouseout", function() { 
 
    clearTimeout(titleShowTimeout); 
 
});

<span title="Tooltip" id="mySpan">Span</span>

Answer 2

あなたはjQueryの-UI ツールチップウィジェット

$(document).tooltip(); 
 
$("#inputhelp").tooltip({ 
 
    open: function(event, ui) { 
 
    \t console.log('Text tooltip'); 
 
    } 
 
});

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<p> 
 
    <a href="#" title="Anchor description">Anchor text</a> 
 
    <input id="inputhelp" title="Input help"> 
 
</p>