jquery.ui工具提示:仅在悬停一段时间后显示工具提示

时间:2022-08-26 22:44:06

I would like to show the tooltip over an element only if I have kept the mouse there for 1 second. If I hover for less than 1 second, the tooltip should not show. How do I accomplish this?

我想只在我将鼠标放在那里1秒钟时才显示工具提示。如果我悬停的时间不到1秒,则不应显示工具提示。我该如何做到这一点?

2 个解决方案

#1


2  

You can use show:{duration:value} option while initializing the tooltip as below:

您可以在初始化工具提示时使用show:{duration:value}选项,如下所示:

$( "#elementid" ).tooltip({
    show: { duration: 2000 }
});

DEMO FIDDLE

DEMO FIDDLE

#2


2  

You can simply set the delay parameter which I found in the docs
The code could look like this

您可以简单地设置我在文档中找到的延迟参数代码可能如下所示

$(document).ready(function() {
  $('.selector').tooltip({
    show: { effect: 'slideDown', delay: 1000, duration: 250 }
  });
});
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<a href="#" class="selector" title="Tooltip with delay and duration">TEST</a>

#1


2  

You can use show:{duration:value} option while initializing the tooltip as below:

您可以在初始化工具提示时使用show:{duration:value}选项,如下所示:

$( "#elementid" ).tooltip({
    show: { duration: 2000 }
});

DEMO FIDDLE

DEMO FIDDLE

#2


2  

You can simply set the delay parameter which I found in the docs
The code could look like this

您可以简单地设置我在文档中找到的延迟参数代码可能如下所示

$(document).ready(function() {
  $('.selector').tooltip({
    show: { effect: 'slideDown', delay: 1000, duration: 250 }
  });
});
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<a href="#" class="selector" title="Tooltip with delay and duration">TEST</a>