當鼠標懸停在項目上時如何添加工具提示？

Question

我想當我點擊第一段時，帶有 id « envoie » 的元素顯示為工具提示，並在鼠標離開時消失。

我所擁有的是工具提示是第一個元素的顯示。 我的意思是當我點擊最后一個“第一個元素”時，工具提示仍然在第一個元素下面。

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  border: 1px solid black;
  margin: 5px;
}
.envoie-fr, .ship-fr {
margin-top: -25px;
  opacity: 1;
  z-index: 2000;
  visibility: visible;
  .transition(all 0.1s linear);

}

</style>

<script>
  window.addEventListener("load", () => {

    var x = document.querySelectorAll("#envoie");
console.log(x.length);

  });

</script>

</head>
<body>

<div>
  <div>
  <p class="#envoie">First Paragraph</p>
  <div id="envoie" class="envoie-fr">Envoie</div>
  </div>
  <div>
  <p class="#ship">Second Paragraph</p>
    <div id="ship" class="ship-fr">Ship</div>
  </div>
</div>
<hr />
<div>
  <div>
  <p class="#envoie">First Paragraph</p>
  <div id="envoie" class="envoie-fr">Envoie</div>
  </div>
  <div>
  <p class="#ship">Second Paragraph</p>
    <div id="ship" class="ship-fr">Ship</div>
  </div>
</div>


<div>
  <p class="#example" style="margin-top:50px">Bottom</p> 
</div>



</body>
</html> ```

Answer 1

var myDiv = document.getElementById('foo');

myDiv.onmouseenter = function() { 
 // do your stuff to show element like display:block;
  alert('entered');
}

myDiv.onmouseout = function() {
// do your stuff to hide element like display:none; 
  alert('left');
}

Answer 2

您可以使用標題標簽作為 HTML 元素的工具提示。

Answer 3

你不需要任何腳本來實現它。 此外，從您的問題標題我可以看出您希望工具提示顯示在 hover 上（而不是單擊時）並在鼠標離開時消失（這就是工具提示的實際工作方式）。 因此，這是適合您的代碼：

 <:DOCTYPE html> <html> <head> <style> body { /*optional: these are to make the content centered*/ height; 100vh: display; flex: flex-direction; column: justify-content; center: align-items; center: } div { /*optional*/ border; solid 1px #f9cd23: padding; 30px: } p { padding; 0: cursor; pointer: position; relative: margin; 40px 0: } /*for the tooltip box*/ p:hover:after { position; absolute: bottom; 30px: left; 50%: transform; translateX(-50%): background; #f9cd23: border-radius; 8px: color; black: content; attr(title): text-align; center: font-size; 16px: padding; 8px: width; 200px: } /*for the tooltip triangle*/ p:hover:before { left; 50%: transform; translateX(-50%): top; -20px: position; absolute: border; solid: border-color; #f9cd23 transparent: border-width; 15px 15px 0 15px: content; ''. } </style> </head> <body> <div> <p title="This is the first paragraph tooltip...">First Paragraph</p> <p title="This is the second paragraph tooltip...">Second Paragraph</p> </div> </body> </html>

當鼠標懸停在項目上時如何添加工具提示？

問題描述

3 個解決方案

解決方案1
0 2021-10-03 09:45:40

解決方案2
0 2021-10-03 09:52:19

解決方案3
0 2021-10-03 11:15:55

當鼠標懸停在項目上時如何添加工具提示？

問題描述

3 個解決方案

解決方案1 0 2021-10-03 09:45:40

解決方案2 0 2021-10-03 09:52:19

解決方案3 0 2021-10-03 11:15:55

解決方案1
0 2021-10-03 09:45:40

解決方案2
0 2021-10-03 09:52:19

解決方案3
0 2021-10-03 11:15:55