Quiero que cuando haga clic en el primer párrafo, el elemento con id «envoie» aparezca como información sobre herramientas y desaparezca cuando el mouse se vaya.
Lo que tengo es que la información sobre herramientas se muestra como el primer elemento. Quiero decir, cuando hago clic en el último «primer elemento», la información sobre herramientas todavía está debajo del primer elemento.
<!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> ```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'); }Puede utilizar la etiqueta de título como información sobre herramientas para el elemento HTML.
No necesita ningún script para que eso suceda. Además, por el título de su problema, puedo decir que desea que la información sobre herramientas se muestre al pasar el mouse (no al hacer clic) y desaparezca cuando el mouse no esté (así es como funciona realmente la información sobre herramientas). Entonces, aquí está el código para ti:
<!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>