gpt4 book ai didi

javascript - jQuery 工具提示 UI - x 秒后触发工具提示

转载 作者:数据小太阳 更新时间:2023-10-29 05:12:58 25 4
gpt4 key购买 nike

这是我目前所拥有的:

<!DOCTYPE HTML>
<html>
<head>
<title>Tooltip Testings</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { margin: 60px auto; } p { padding:0; margin: 4px auto; text-align: center; }
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).tooltip({
items: '.tooltip',
show: 100,
hide: 500,
position: { my: 'center bottom', at: 'center top' },
content: function( callback ) {
var msgid = this.id.split('_')[1];
$.ajax({
type: 'post',
url: '/tooltip.php',
data:'i='+msgid,
success: function( data ) { callback( data ); }
});
}
});
});
</script>
</head>
<body>

<p><a class="tooltip" id="i_283" href="articles/programming-in-php.html">PHP Article</a></p>
<p><a class="tooltip" id="i_567" href="articles/programming-in-c.html">C+ Article</a></p>
<p><a class="tooltip" id="i_741" href="articles/programming-in-aspx.html">ASPX Article</a></p>
<p><a class="tooltip" id="i_860" href="articles/programming-in-java.html">Java Article</a></p>

</body>
</html>

上面的工作正常,但是,我想仅在鼠标悬停链接特定时间(例如 2 秒)后才触发工具提示。

此外,如果用户在指定的延迟时间到期之前将鼠标移出链接,我想取消它的触发。

有人可以帮我解决这个问题吗?

非常感谢。

最佳答案

我终于设法实现了我所寻找的。

最终结果如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Tooltip Testings</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { margin: 60px auto; } p { padding:0; margin: 4px auto; text-align: center; }
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).tooltip({
items: '.tooltip',
show: 100,
hide: 500,
position: { my: 'center bottom', at: 'center top' },
content: function( callback ) {
var ARTid = this.id.split('_')[1];
var TTtmr = setTimeout( function() {
$.ajax({
type: 'post',
url: '/tooltip.php',
data: 'i='+ARTid,
success: function( data ) { callback( data ); }
});
}, 800 );
$('.tooltip').mouseleave( function() { clearTimeout( TTtmr ); } );
}
});
});
</script>
</head>
<body>

<p><a class="tooltip" id="i_283" href="articles/programming-in-php.html">PHP Article</a></p>
<p><a class="tooltip" id="i_567" href="articles/programming-in-c.html">C+ Article</a></p>
<p><a class="tooltip" id="i_741" href="articles/programming-in-aspx.html">ASPX Article</a></p>
<p><a class="tooltip" id="i_283" href="articles/programming-in-java.html">Java Article</a></p>

</body>
</html>

关于javascript - jQuery 工具提示 UI - x 秒后触发工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16499249/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com