taiga-ui
taiga-ui copied to clipboard
[BUG] axes bar Tooltip shifts to the side if i change font-size html
🐞 Bug report
Description
axes bar Tooltip shifts to the side if i change font-size html
Reproduction
- open https://taiga-ui.dev/components/axes
- open devtools
- change html font-size 10px
- put mouse on the bar

If default html font size 16px, it's ok
for one array item look font size 10px :
Hello @waterplea, i think it depends of ARROWHEAD_OFFSET. The default font-size is 16px, it's ok work with const ARROW_SIZE = 8; const ARROW_OFFSET = 16;
But I got the project where responsive font-size. Do you think to create dynamic calc like this for the TuiHintBoxComponent const fontOffsetPx = document.....fontSize; const fontOffset = fontOffsetPx ? +document.documentElement.style.fontSize.replace('px', '') : 16; const realOffset = 21 * fontOffset / 16; const verticalLeft = hostRect.left - tooltipRect.width + hostRect.width / 2 + realOffset - portalRect.left;
or may by allow make @Input ARROW_OFFSET / ARROW_SIZE for customise
I think the most reasonable fix would be to change ::before
positioning of tui-hint-box
(the arrow) back to pixels. Shouldn't matter that much visually but it would allow us to keep the same math since positioning is done with ClientRect
which is in pixels.
@AnteaterKit would you like to contribute?
I'm on vacation now. After rest, i'll return to this issue
@AnteaterKit are you up for a PR? :)
Fixed in 3.0