Custom Arrow slightly shifted react / storybook / styled-components

[Emma-chaps]

Hi everyone !

I try to use headless Tippy in a react/storybook/styled-components project's but i have a little css problem with the arrow position's .

It's a little too far to the right as you can see :

Do you know how can I fixe that please ? You can see my code next, thanks a lot. for every idea.

• My stories component :

import React, { ReactElement } from 'react';

import Checkbox from '../Checkbox/Checkbox';

import Tooltip, { TooltipProps } from './Tooltip';

export default {
  title: 'basics/Tooltip',
  argTypes: {
    placement: {
      options: ['top', 'right', 'bottom', 'left'],
      control: {
        type: 'inline-radio',
      },
    },
  },
  args: {
    arrow: { control: 'boolean' },
    content: { control: 'string' },
  },
};

export const Basic = (args: TooltipProps): ReactElement => (
  <div style={{ marginTop: '50px', marginLeft: '250px' }}>
    <Tooltip {...args}>
      <Checkbox>Hover me</Checkbox>
    </Tooltip>
  </div>
);
Basic.args = {
  arrow: true,
  content: 'My beautiful tooltip',
  placement: 'bottom',
};

• My Component :

import React from 'react';
import type { FC } from 'react';

import Tippy from '@tippyjs/react/headless';
import { TooltipStyle, Container, Arrow } from './Tooltip.style';

export interface TooltipProps {
  arrow?: boolean,
  content?: string,
  placement?: 'top' | 'right' | 'bottom' | 'left',
}

const Tooltip: FC<TooltipProps> = ({
  arrow = true,
  content,
  placement = 'bottom',
  children,
}) => (
  <Tippy
    render={() => (
      <TooltipStyle
        data-popper-placement={placement}
      >
        {content}
        { arrow && <Arrow id="arrow" data-popper-arrow /> }
      </TooltipStyle>
    )}
    placement={placement}
    visible
  >
    <Container>
      {children}
    </Container>
  </Tippy>

);

export default Tooltip;

My CSS with styled-component :

import styled from 'styled-components';

import {
  TEXT_LIGHT_COLOR,
  BACKGROUND_DARKED_COLOR,
} from '../../colors';

export const TooltipStyle = styled.div`
  position: relative;

  border-radius: 5px;
  padding: 4px 5px 5px 5px;

  font-size: 12px;
  background-color: ${BACKGROUND_DARKED_COLOR};
  color: ${TEXT_LIGHT_COLOR};
  text-align: center;

  &[data-popper-placement='top'] {
    margin-bottom: -5px;

     & > #arrow {
      bottom: 4px;
    }
  }

  &[data-popper-placement='bottom'] {
    margin-top: -5px;

    & > #arrow {
      top: -4px;
    }
  }

  &[data-popper-placement='left'] {
    margin-right: -5px;

    & > #arrow {
      bottom: 16px;
      right: 4px;
    }
  }

  &[data-popper-placement='right'] {
    margin-left: -5px;

    & > #arrow {
      bottom: 16px;
      left: -4px;
    }
  }
`;

export const Container = styled.div`
  // to expand height and width of his children
  height: max-content;
  width: max-content;
`;

export const Arrow = styled.div`
  visibility: hidden;
  background-color:  ${BACKGROUND_DARKED_COLOR};

  &::before {
    position: absolute;

    width: 8px;
    height: 8px;

    content: '';
    visibility: visible;
    background: inherit;
    transform: rotate(45deg);
  }
`;

[atomiks]

Inspecting the CSS in the elements panel should help show any margins or padding around the arrow which can cause that issue. Make sure you're not using margin anywhere, but instead, the offset modifier, or padding options in modifiers.

[Emma-chaps]

Hi, thanks for your answer. I have checked everywere but there is no margin or padding. or anything..

[atomiks]

There's margin in your styles:

  &[data-popper-placement='top'] {
    margin-bottom: -5px;

To inspect the element, make sure you've selected the tooltip element itself. Since it has pointer-events: none;, you'll need to scroll down the elements panel and find that it's appended to the body (by default) to select it

[Emma-chaps]

I have disable all margin and padding css but the problème is still here. I have put the tooltip in visible and try every HTML Element before and after but I can't find solution.

Maybe the problem is storybook. I'm going to try my css in another project and I let you know. Thanks for answering so quickely.

[Emma-chaps]

Hi ! I have try in another project without storybook but I have the same probleme. I really don't understand. Do you have a demo codesandbox with only a custom css please ?