ARNAT - styled-tooltip

Modular approach to use bootstrap components for quick prototypes, as an entrypoint of the component library.

Usage

import React, { useState } from 'react';

import { Button } from '@arnat/styled-button';
import { Tooltip, TooltipArrow, TooltipInner } from '@arnat/styled-tooltip';

export const SimpleTooltipToggle = () => {
  const [hidden, setHidden] = useState(true);
  const [position, setPosition] = useState([0, 0]);

  return (
    <Container style={{ minHeight: '50vh' }} dFlex alignItemsCenter justifyContentCenter>
      <Button
        danger
        onMouseLeave={() => setHidden(true)}
        onMouseEnter={ev => {
          setHidden(false);
          setPosition([ev.target.offsetTop + 5, ev.target.offsetLeft + ev.target.offsetWidth]);
        }}
      >
        Hover to toggle tooltip
      </Button>
      <Tooltip
        hidden={hidden}
        style={{
          top: `${position[0]}px`,
          left: `${position[1]}px`,
        }}
        right
      >
        <TooltipArrow right />
        <TooltipInner right>Tooltip Title</TooltipInner>
      </Tooltip>
    </Container>
  );
};

Properties

Properties which can be added to the component to change the visual appearance.

• pill only on TooltipInner Type: boolean
• noRadius only on TooltipInner Type: boolean
• hidden Type: boolean
• right Type: boolean
• top Type: boolean
• left Type: boolean
• bottom Type: boolean
• transitionProps Type:: object