How to make a tooltip for scrollbar?

Question

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?

listen for mousedown/up and scroll events, and display a fixed position element with appropriate content — Jaromanda X, Nov 08 '15 at 11:52

score 2 · Answer 1 · answered Nov 08 '15 at 12:15

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;
            }
        }
    });

this is not working with the mousewheel but Google's does. This only works when we scroll by clicking the scroll-bar. And it is fixed on the page itself but does not move with the scrollbar. http://jsfiddle.net/shmshd12/kv4f2bf0/ — Shamshid, Nov 08 '15 at 12:44

score 0 · Answer 2 · answered May 03 '17 at 15:36

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)

How to make a tooltip for scrollbar?

2 Answers2