pdh-design-system/src/atoms/Tooltip/Tooltip.stories.js

PDH Design System React Components

import React from 'react';
import { Placement } from 'react-bootstrap';
import Tooltip from '@atoms/Tooltip/Tooltip';
import Button from '@atoms/Button/Button';

export default {
  title: 'atoms/Tooltip',
  component: Tooltip,
  argTypes: {
    placement: {
      options: ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end"],
      control: {
        type: "select",
      }
    }
  },
};

const Template = (args) => {
  return (
    <Tooltip {...args} >
      <Button>Hover to see</Button>
    </Tooltip>
  );
};

export const _Tooltip = Template.bind({});
_Tooltip.args = {
  title: 'Tooltip Title',
  flip: true
};