search

Home  >  Article  >  Web Front-end  >  Use CSS to create a tooltip that appears when the user moves the mouse over an element

Use CSS to create a tooltip that appears when the user moves the mouse over an element

WBOY
WBOYforward
2023-08-28 16:25:071097browse

使用 CSS 创建当用户将鼠标移动到元素上时出现的工具提示

# You can try running the following code to create a tooltip visible on mouseover. Using the Visibility Attribute

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>

The above is the detailed content of Use CSS to create a tooltip that appears when the user moves the mouse over an element. 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：How to use CSS to specify target media within a document's languageNext article：How to use CSS to specify target media within a document's language

Related articles

See more