little gap between arrow and body on mouseleave

[spostad7]

much appreciate about this work, really usefull and clean,
when I hover out from an element there is a little gap between arrow and body. I think it's because of transition timing or something

[ghosh]

@spostad7 Thanks for reporting. Will look into it.

[BenceSzalai]

I am experiencing a similar issue.

In Firefox in many cases there is a 1px gap between the tooltip body and the triangle. It does not effect large target elements, but when the tooltip target gets smaller cca. < 30px the gap starts to appear. For example a top aligned tooltip has a gap if the element is 21px high, has no gap when 22px, has a gap again if it is 23px etc. So it looks like a rounding error.

Now apparently Firefox rounds every pixel positions to a whole pixel before rendering making the issue this hectic. Probably it's a rounding issue with the height of the element and the transform 50%.

Chrome instead calculates precise subpixels and renders them without rounding, using interpolation. In Chrome in these cases what happens is that the triangle and the tooltip body sometimes slightly-slightly overlaps. It is visible because they are semi-transparent and the overlap is visibly darker.

Long story short there is something funky going on with the positionings for sure. My workaround for now is this (in SCSS, note that the @-moz-document url-prefix() { part only targets Firefox)

[role~="tooltip"][data-microtip-position="top"]::before,
[role~="tooltip"][data-microtip-position="top-left"]::before,
[role~="tooltip"][data-microtip-position="top-right"]::before {
  bottom: calc(100% - 0.9px);
  @-moz-document url-prefix() {
    bottom: calc(100% + 0.1px);
  }
}
[role~="tooltip"][data-microtip-position="bottom"]::before,
[role~="tooltip"][data-microtip-position="bottom-left"]::before,
[role~="tooltip"][data-microtip-position="bottom-right"]::before {
  top: calc(100% - 0.9px);
  @-moz-document url-prefix() {
    top: calc(100% + 0.1px);
  }
}
[role~="tooltip"][data-microtip-position="left"]::before {
  right: calc(100% - 0.4px);
  @-moz-document url-prefix() {
    right: calc(100% + 0.1px);
  }
}
[role~="tooltip"][data-microtip-position="right"]::before {
  left: calc(100% - 0.4px);
  @-moz-document url-prefix() {
    left: calc(100% + 0.1px);
  }
}

It feels so wrong, I know. But still it is better than gaps all around. The gap still appears sometimes during the show/hide animations, but that's still much better than having a gap when the tip is displayed.

Not sure why I have this issue. Also interestingly I did not notice it when I first started to use microtip, so it may be related to some other css rules I've added somewhere else to the page. Will update here if I find it...