Create a tooltip that appears when the user moves the mouse over an element with CSS



You can try to run the following code to create a tooltip visible on mouse over. Use the visibility property

Example

Live demo

<!DOCTYPE html> <html>    <style>       #mytooltip #mytext {          visibility: hidden;          width: 100px;          background-color: black;          color: #fff;          text-align: center;          border-radius: 3px;          padding: 10px 0;          position: absolute;          z-index: 1;       }       #mytooltip:hover #mytext {          visibility: visible;       }    </style>    <body>       <div id = "mytooltip">Hover the mouse over me          <p id = "mytext">My Tooltip text</p>       </div>    </body> </html>
Updated on: 2020-06-24T06:53:17+05:30

392 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements