Misalignment on Internet Explorer

[Edilson Pacheco]

Hey there \o

I'm working with some browsers compatibility. Testing on Chrome, Firefox and Edge, the toolptip is doing well, but on IE (in its twentieth version), i'm having some problems with a unnecessary addition of top in relation to the document, making the Tooltip out of alignment with its parent component.

Chrome example:

IE example:

Currently, the code of the Tooltip looks like that:

import React, { cloneElement } from 'react';
import ResizeObserver from "resize-observer-polyfill";
import { useToggleLayer, anchor, Arrow } from 'react-laag'

 import Container from './styles';

function Tooltip({ content, children }) {

  const [element, toggleLayerProps] = useToggleLayer(
    ({ layerProps, isOpen, arrowStyle, layerSide }) => isOpen && (
      <Container 
      ref={layerProps.ref}
      style={{
        ...layerProps.style,
      }}
      >
        {content}
        <Arrow 
          style={{
            ...arrowStyle,
          }}
          layerSide={layerSide}
          backgroundColor="#FFFFFF"
          borderWidth={1}
          borderColor="#FFFFFF"
          angle={40}
          size={9}
          roundness={0.8}
        />
      </Container>
    ),
    {
      placement: {
        anchor: anchor.RIGHT_CENTER,
        triggerOffset: 10
      },
      closeOnOutsideClick: true,
      ResizeObserver,
    }
  )
  return (
    <>
    {element}
    {cloneElement(children, {onClick: toggleLayerProps.openFromMouseEvent})}
    </>
  )
}

export default Tooltip;

I'm don't have sure if my approach is the best way of abstraction and reuse with the lib, if that is wrong, i'd like to know the best pratice. I'm just want to figure out why i'm having this browsers mismatch 😅

[Erik Verweij]

Hi @diipacheco, sorry for my late response!
I think your code looks fine :)
I've released v2.0.0 today. If you have time, can you tell me if you're still experiencing problems after upgrading?
If so, is it possible to create a basic CodeSandbox so I can easily reproduce the problem?