CSS |工具提示淡入动画

工具提示用于在鼠标悬停在该元素上时显示有关该元素的信息。工具提示默认显示为无延迟(动画)。

如何在工具提示中添加动画?
我们可以在工具提示文本变得可见之前为其添加淡入效果。这可以通过使用 CSS 中的 transition属性在给定的秒数内将不透明度从 0 更改为完全来完成。

句法：

.tooltip .tooltip_text {
      opacity: 0;
      transition: opacity 3s;
 }

 .tooltip:hover .tooltip_text {
      visibility: visible;
      opacity: 1;
 }

例子：

  

    

  

    
GeeksforGeeks
        
            A Computer science portal for geeks
        
    

  

输出：

最初，工具提示文本的不透明度设置为 0，然后将过渡应用于不透明度，延迟为 3 秒。
当我们将鼠标悬停在“GeeksforGeeks”文本上时，工具提示在 3 秒内变为 100% 可见。这会导致淡入效果/动画。