jQuery UI 工具提示隐藏选项

jQuery UI 由使用 jQuery、CSS 和 HTML 实现的 GUI 小部件、视觉效果和主题组成。 jQuery UI 非常适合为网页构建 UI 界面。 jQuery UI 工具提示小部件帮助我们添加新主题并允许自定义。在这篇文章中，我们将看到如何使用隐藏 jQuery UI 工具提示中的选项。隐藏  option 用于在隐藏在工具提示中时添加动画效果。默认情况下，该值为True。

句法：

$( ".selector" ).tooltips(
   { hide : true }
);

参数：

• Boolean：如果设置为false，则没有隐藏效果。
• 数字：工具提示隐藏的时间（毫秒）。
• 字符串：字符串用于选择隐藏工具提示的效果。该效果将用于使用默认持续时间和缓动进行隐藏。
• 对象：使用对象作为值隐藏工具提示，其中提供了效果、缓动、持续时间和延迟属性。

方法：

• 首先，添加项目所需的 jQuery UI 脚本。

示例 1：以下示例演示了工具提示的布尔类型的隐藏选项。

HTML

   

    
    
    
    
       
    
    
   
    
        GeeksforGeeks
    
       
    
        jQuery UI | Tooltip hide Boolean option
      
  

    
    
    Tooltips
    GeeksforGeeks is a computer science portal
 
     
        $(document).ready(function() {
            $("#p1").tooltip({
                hide: { true }               
            });                  
             
        });
    

   

输出：

工具提示隐藏

单击工具提示链接后，我们将获得以下工具提示作为输出。

This is a tooltip

示例 2：以下示例演示了具有 400 毫秒时间的爆炸动画效果的工具提示的隐藏。此处显示了使用expand as String 和 400ms as Number选项。

HTML

   

    
    
   
    
    
   
    
    
   
    
        GeeksforGeeks
    
       
    
        jQuery UI | Tooltip hide option
    
   
    
        $(function () {
            $("#gfg1").tooltip({
                hide: { effect: "explode", duration: 400 }
            });
            $("#gfg1").tooltip();
            $("#gfg2").tooltip();
        });
    

   

    Name:
    
   
     

        Click here!
    
  
  
 

输出：

示例 3：下面的示例演示了在200毫秒的时间内使用slideUp选项隐藏动画。

HTML

   

    
    
    
       
    
    
   
    
        GeeksforGeeks
    
       
    
        jQuery UI | Tooltip hide SlideUp option
    
   
    
        $(function () {
            $("#gfg1").tooltip({
                hide: { effect: "slideUp", duration: 200 }
            });
            $("#gfg1").tooltip();
            $("#gfg2").tooltip();
        });
    

   

    Name:
    
   
     

        Click here!
    
  

   
  
         

输出：

参考： https : //api.jqueryui.com/category/widgets/