Google Charts: всплывающие подсказки находятся в неверном положении внутри прокручиваемого контейнера

Question

Я использую Google Charts (особенно временную шкалу) и сталкиваюсь со странной проблемой.

Когда временная шкала находится внутри контейнера, который может прокручиваться по вертикали, вертикальная позиция всплывающей подсказки баровесли контейнер прокручивается.

По сути, чем больше вы прокручиваете, тем больше всплывающая подсказка, я сделал несколько снимков экрана, чтобы проиллюстрировать это:

Вот подсказка, когда контейнерне прокручивается, позиция правильная:

Теперь, давайте прокрутим немного, вертикальная позиция всплывающей подсказки начинает дрейфовать:

... и чем больше мы прокручиваем, тем больше он дрейфует:

Я пытался воспроизвести это в JSfiddle, но безуспешно, к сожалению, оригинальный коддовольно сложный и трудный для воспроизведения в качестве простого примера, но любые предложения о том, как даже приблизиться к этому, приветствуются.

Answer 1

Ну, пока я ждал ответов, я разработал этот обходной путь:

//This instruction selects the internal div that actually shows the scrollbar
//The div is generated automatically by the Google library when you put the Timeline inside 
//an element (#maincontainer in our case) that has a fixed height too small to fit the entire timeline
//It unfortuantely has no classes to make a more specific selector
let scrollElem = $(`#maincontainer > div > div:nth-child(1) > div > div`);

//We then monitor mouse movement on the scrollable div
scrollElem.on('mousemove', function( event ) {
    //When mouse moves, we determine how much the container is scrolled vertically  
    let scrollAmnt = scrollElem.scrollTop();

    //then we update a CSS style tag that forces the tooltip to a specific position
    //Y-axis position = level with mouse pointer (= mouse Y-position relative to scrolling container - scroll amount)
    //X-axis position = just to the right of the mouse pointer
    $('#tooltip-style').text(`.google-visualization-tooltip{
        top: ${event.offsetY - scrollAmnt}px !important; 
        left: ${event.offsetX + 15}px !important;
    }`);
});

, возможно, не самое красивое из решений, но прекрасно работает.Я оставлю вопрос открытым на несколько дней, чтобы выяснить, есть ли у кого-то более «правильное» решение.