title 속성에 툴팁이 표시되는 이벤트가 있습니까?

Question

그래서, 나는 title 속성이 기간 있다고 가정 해 봅시다 :

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

이것은 툴팁이 잘 보여줍니다,하지만 난 경우에 대한 이벤트 리스너의 어떤 종류를 연결하고 싶습니다 제목은 JavaScript 또는 JQuery와 함께 표시됩니다. 예 : 뭔가 (분명히 "title" 유효한 이벤트 아님)과 같은 :

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

---

내가 자바 스크립트로 내 자신의 툴팁을 만들 수 있다는 것을 알고이 같은 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에 0.5 초 (시행 착오를 기반으로했으며 어떤 문서에서도 찾을 수 없음)의 setTimeout을 시작하고 mouseout 일 때 취소합니다. 그것은 나를 위해 작동하지만 지연이 브라우저/OS에 따라 변경되면 작동하지 않을 수 있습니다.

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>