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 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工具提示

2 个答案: