Home > Article > Web Front-end > Fade in tooltips using CSS animation

Fade in tooltips using CSS animation

WBOYforward: 2023-09-10 16:13:021266browse

使用 CSS 动画淡入工具提示

To fade in the tooltip text using CSS, you can try running the following code:

Example

Live Demo

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

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

css

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How do CSS3 properties implement navigation bar animation effects in web pages?Next article：How do CSS3 properties implement navigation bar animation effects in web pages?

See more

Fade in tooltips using CSS animation

Example

Related articles