Show JQuery qtip on scrolling

220 Views Asked by ZenKurd At 28 April 2018 at 02:28

I have a list of elements with JQuery qtip attached to each and I would like the qtip to automatically show when user scrolls the page.

Please note that only the qtip for uppermost visible element on top of the page should be shown when scrolling.

I looked through the docs and came across http://qtip2.com/options#show.ready but the problem with this is it cannot be used with scroll event.

 <head>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script src="http://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.css">
</head>

<body>
    <div>Sample link</div>
    <div>Sample link</div>
    <div>Sample link</div>
    <div>Sample link</div>
    <div>Sample link</div>
    <div>Sample link</div>
    <div>Sample link</div>
    <div>Sample link</div>
    <div>Sample link</div>

    <script>
        $('div').qtip({
            content: 'I use the built-in jQuery .slideUp() and .slideDown() methods',
            show: {
                effect: function () {
                    $(this).slideDown();
                },
            },
            hide: {
                effect: function () {
                    $(this).slideUp();
                }
            }
        });
    </script>

    <style>
        div {
            width: 100px;
            height: 200px;
        }
    </style>
</body>

Original Q&A

There are 1 best solutions below

ZenKurd On 28 April 2018 at 18:13

Solved it like this:

    let divs = $('div');

    document.body.onscroll = function () {
        let div height = 200;
        let index = Math.floor(window.scrollY / div_height);
        let div = divs[index];
        if (div.classList.contains("active")) {
            return;
        }

        if (index > 0 && div.previousElementSibling.classList.contains("active")) div.previousElementSibling.classList.remove("active");
        if (index < divs.length && div.nextElementSibling.classList.contains("active")) div.nextElementSibling.classList.remove("active");

        div.classList.add("active")
        $(div).qtip("show")
    }

Show JQuery qtip on scrolling

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in QTIP2

Related Questions in QTIP

Trending Questions

Popular # Hahtags

Popular Questions