search

Home >Web Front-end >CSS Tutorial >Create tooltips using CSS

Create tooltips using CSS

王林
王林forward
2023-08-27 22:37:02604browse

使用 CSS 创建工具提示

Tooltips are visible when the user moves the mouse cursor over text. You can add information there to make it easier for users to understand.

Example

You can try running the following code to see how to create a tooltip -

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>

The above is the detailed content of Create tooltips using CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Top 10 Tailwind CSS pluginsNext article：Top 10 Tailwind CSS plugins

Related articles

See more