@arnat/styled-tooltip
TypeScript icon, indicating that this package has built-in type declarations

0.0.12 • Public • Published

ARNAT - styled-tooltip

npm Travis branch Codecov branch storybook lerna

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

Package Sidebar

Install

npm i @arnat/styled-tooltip

Weekly Downloads

2

Version

0.0.12

License

MIT

Unpacked Size

25.3 kB

Total Files

13

Last publish

Collaborators

  • arnat.technologies
  • rsurjano