Set top tooltip using CSS

王林

Release： 2023-09-13 12:01:02

forward

965 people have browsed it

使用 CSS 设置顶部工具提示

To set the top tooltip, use the bottomCSS property.

You can try running the following code to set the top tooltip to text:

Example

Live Demo

<!DOCTYPE html>
<html>
   <style>
      .mytooltip .mytext {
         visibility: hidden;
         width: 140px;
         background-color: blue;
         color: #fff;
         z-index: 1;
         bottom: 100%;
         left: 60%;
         margin-left: -90px;
         text-align: center;
         border-radius: 6px;
         padding: 5px 0;
         position: absolute;
      }
      .mytooltip {
         position: relative;
         display: inline-block;
         margin-top: 50px;
      }
      .mytooltip:hover .mytext {
         visibility: visible;
      }
   </style>
   <body>
      <div class = "mytooltip">Keep mouse cursor over me
         <span class = "mytext"> My Tooltip text</span>
      </div>
   </body>
</html>

Copy after login

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

source：tutorialspoint.com

Previous article：Animation effects in CSS Next article：CSS Viewport: How to use vh, vw, vmin, and vmax units for responsive design

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn