在按钮的第一个鼠标悬停操作上未显示Bootstrap工具提示
[英]Bootstrap tooltip not displayed on the first mouse hover action on button
问题描述
我有一个基本的，自上而下的Bootstrap按钮，该按钮除其（Bootstrap）工具提示仅在第二次鼠标悬停操作上显示之外，就可以正常使用，是否知道这在第一次悬停鼠标时不起作用？
HTML方面：
<body>
[...]
<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-trigger="hover" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span></a>
[...]
</body>
</html>
JavaScript方面：
<script>
function fadeInBody() {
$('body').fadeIn(500);
}
$(document).ready(function () {
fadeInBody();
$(window).scroll(function () {
if ($(this).scrollTop() > 5) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function () {
$('#back-to-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
$('#back-to-top').tooltip('show');
$('[data-toggle="tooltip"]').tooltip();
});
</script>
2 个解决方案
解决方案1
1 2017-10-10 15:44:07
由于您仅共享子元素，因此调试起来更加困难，但是我通常将data-tooltip放在包含<a>标记的父元素上。 我也从未使用过data-trigger参数，但是它似乎并没有引起您正在谈论的故障。
脚本是否在<body>标签的末尾加载？
希望这可以帮助！
解决方案2
1 已采纳 2017-10-10 16:34:30
我设法重现了这一问题。
我认为基本问题与jQuery ready事件处理程序有关，实际上您不需要调用$('#back-to-top').tooltip('show'); ：
<script>
function fadeInBody() {
$('body').fadeIn(500);
}
$(document).ready(function () {
fadeInBody();
$(window).scroll(function () {
if ($(this).scrollTop() > 5) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function () {
$('#back-to-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
// Try to comment this out below
// $('#back-to-top').tooltip('show');
$('[data-toggle="tooltip"]').tooltip();
});
</script>
让我知道您是否仍然面临该问题。
引导工具提示不适用于鼠标悬停
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.