javascript - 在第一个鼠标悬停操作按钮上未显示Bootstrap工具提示

我有一个基本的，自上而下的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>

最佳答案

我设法重现了这一问题。

我认为基本问题与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>

让我知道您是否仍然面临该问题。

bootstrap

javascript - 在第一个鼠标悬停操作按钮上未显示Bootstrap工具提示