How can I add a tooltip when mouse is over an item?-CodePudding

I want wen I click on first paragraph, the element with id « envoie » shows up as a tooltip and disappear when mouse leave.

What I have is the tooltip is display une the first element. I mean when I click on the last « first element », the tooltip is still under the first element.

<!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> ```

CodePudding user response：

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');
}

CodePudding user response：

You can use the title tag as a tooltip to the HTML element.

CodePudding user response：

You do not need any script to make that happened. Also, from your issue title I can tell that you want the tooltip be displayed on hover (not on click) and disappeared when the mouse is away (this is how actually tooltips work). So, here is the code for you:

<!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>