Bootstrap 按钮上的第一个鼠标悬停操作不显示工具提示

Question

我有一个基本的返回顶部 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>

Answer 1

由于您只共享了子元素，因此更难调试，但我通常将 data-tooltip 放在包含 <a> 标记的父元素上。我也从未使用过 data-trigger 参数，但它似乎并没有造成您所说的故障。

您的脚本是否在 <body> 标记的末尾加载？

希望对您有所帮助！

Answer 2

我设法重现了我这边的问题。

我认为根本问题与您的 jQuery 就绪事件处理程序有关，您实际上不需要调用 $('#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 按钮上的第一个鼠标悬停操作不显示工具提示

Bootstrap tooltip not displayed on the first mouse hover action on button

javascript

css

jquery

twitter-bootstrap

twitter-bootstrap-tooltip