在按钮的第一个鼠标悬停操作上未显示Bootstrap工具提示
[英]Bootstrap tooltip not displayed on the first mouse hover action on button
问题描述
I have a basic back to top Bootstrap button that works perfectly except that its (Bootstrap) tooltip only shows up on the second mouse hovering action, any idea this is not working on the first mouse hovering? 
我有一个基本的，自上而下的Bootstrap按钮，该按钮除其（Bootstrap）工具提示仅在第二次鼠标悬停操作上显示之外，就可以正常使用，是否知道这在第一次悬停鼠标时不起作用？
Html side: 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 side: 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
Since you only shared the child element it makes it harder to debug, but I usually put the data-tooltip on the parent element containing the <a> tag. 由于您仅共享子元素，因此调试起来更加困难，但是我通常将data-tooltip放在包含<a>标记的父元素上。 I also never used the data-trigger parameter, but it doesn't seem to be creating the glitch you're talking about. 我也从未使用过data-trigger参数，但是它似乎并没有引起您正在谈论的故障。
Is your script loaded at the end of your <body> tag? 脚本是否在<body>标签的末尾加载？
Hope this helps! 希望这可以帮助！
解决方案2
1 已采纳 2017-10-10 16:34:30
I managed to reproduce the issue on my side. 我设法重现了这一问题。
I think the underlying problem is related to your jQuery ready event handler, you actually don't need to call $('#back-to-top').tooltip('show'); 我认为基本问题与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>
Let me know if you are still facing the issue. 让我知道您是否仍然面临该问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.