search

LinkedInAttic / hopscotch

A framework to make it easy for developers to add product tours to their pages.
Apache License 2.0
4.19k stars 664 forks source link

Arrow isn't centered #324

Closed Spenhouet closed 7 years ago

Spenhouet commented 7 years ago

In the line 684 and 694 the arrow position is set:

if (arrowOffset === 'center') {
    arrowEl.style.top = Math.floor((bubbleBoundingHeight / 2) - arrowEl.offsetHeight/2) + 'px';
}

but the arrow container (arrowEl) doesn't have the correct offsetWidth or offsetHeight. It's always 15 x 15.

bubble-arrow-container {
    width: 15px;
    height: 15px;
}

Arrow container

Therefor the arrow position is always wrong.

For a quick fix, i just replaced this line with the following hard coded half of arrow height + border ((34 + 10) / 2):

if (arrowOffset === 'center') {
    arrowEl.style.top = Math.floor(bubbleBoundingHeight / 2) - 22 + 'px';
}