search

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

Fade in tooltips using CSS animation

WBOY
WBOYforward
2023-09-10 16:13:021269browse

使用 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?

Related articles

See more