CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstraptwitter-bootstrap-tooltip
Youna
Youna

Reputation: 45

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?

Html side: 

<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: 

<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>

Upvotes: 1

Views: 1359

Answers (2)

Natalie Perret
Natalie Perret

Reputation: 8997

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');:

<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.

Upvotes: 1

Fr&#233;d&#233;ric Marcotte Pich&#233;
Fr&#233;d&#233;ric Marcotte Pich&#233;

Reputation: 99

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. I also never used the data-trigger parameter, but it doesn't seem to be creating the glitch you're talking about.

Is your script loaded at the end of your <body> tag?

Hope this helps!

Upvotes: 1

Related Questions