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
#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
#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>