CODEWITHSUNDEEP
javascripthtmlcsstooltipjquery-tooltip
Shamshid
Shamshid

Reputation: 423

How to make a tooltip for scrollbar?

I'm doing a webpage with listed items and those items are in Alphabetic order. Today i saw Tooltip in Google's contact web when scrolling my Mobile contact list from that web. Tooltip was fixed with scroll-bar and moves along with scroll-bar. I was wondering to implement that idea into my project because my list items are also in Alphabetic order. Can someone help out how to make a Tooltip like Google does?

enter image description here

Upvotes: 3

Views: 2414

Answers (2)

santa
santa

Reputation: 1

I was working on the same problem.. what about this (naive) solution?

$(window).scroll(function(){
  $("#scrollerTooltip").css("top",(window.pageYOffset+window.pageYOffset*window.innerHeight)/document.body.scrollHeight)+'px');
});

Here's an example for this issue (working on chrome)

Upvotes: 0

Jaromanda X
Jaromanda X

Reputation: 1

This should get you started - clearly this wont work on mobile devices, but it may be a good jumping off point

    var tooltip = document.createElement('div');
    tooltip.style.cssText = 'position:fixed;right:18px;top:0;display:none;width:4em;height:1.2em;background:black;font-size:24px;font-weight:bold;color:white;text-align:center;padding-top:5px;';
    document.body.appendChild(tooltip);

    var mouseIsDown = false;
    var displayed = false;
    window.addEventListener('mousedown', function() {
        mouseIsDown = true;
    });
    window.addEventListener('mouseup', function() {
        mouseIsDown = false;
        if (displayed) {
            displayed = false;
            tooltip.style.display = 'none';
        }
    });
    window.addEventListener('mousemove', function(e) {
        if (displayed) {
            tooltip.style.top = e.clientY + 'px';
            console.log(e);
        }
    });
    window.addEventListener('scroll', function() {
        if (mouseIsDown) {
            var pos = parseInt(window.scrollY * 100.0 / window.scrollMaxY);
            tooltip.textContent = pos + '%';
            if (!displayed) {
                tooltip.style.display = 'block';
                displayed = true;
            }
        }
    });

Upvotes: 2

Related Questions