<div
  style={{
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: 20,
  }}
>
  <Tooltip
    additionalGap={0}
    content={<div>Content</div>}
    mobilePlacement="top"
    mobileWidth={250}
    placement="top"
    targetId="buttonIdTop"
    width={250}
  >
    <Button
      id="buttonIdTop"
      psuedoDisabled
      shadowless
      shouldShowTooltipIndicator
      style={{ width: 250 }}
    >
      Top
    </Button>
  </Tooltip>
  <Tooltip
    content={<div>Content</div>}
    mobilePlacement="left"
    mobileWidth={50}
    placement="left"
    targetId="buttonIdLeft"
    width={100}
  >
    <Button
      id="buttonIdLeft"
      psuedoDisabled
      shadowless
      shouldShowTooltipIndicator
      style={{ width: 250 }}
    >
      Left
    </Button>
  </Tooltip>
  <Tooltip
    additionalGap={0}
    content={<div>Content</div>}
    mobilePlacement="bottom"
    mobileWidth={250}
    open
    placement="bottom"
    targetId="buttonIdBottom"
    width={250}
  >
    <Button
      id="buttonIdBottom"
      psuedoDisabled
      shadowless
      shouldShowTooltipIndicator
      style={{ width: 250 }}
    >
      Bottom
    </Button>
  </Tooltip>
  <Tooltip
    content={<div>Content</div>}
    mobilePlacement="right"
    mobileWidth={50}
    open
    placement="right"
    targetId="buttonIdRight"
    width={100}
  >
    <Button
      id="buttonIdRight"
      psuedoDisabled
      shadowless
      shouldShowTooltipIndicator
      style={{ width: 250 }}
    >
      Right
    </Button>
  </Tooltip>
</div>