import React from 'react';

import { HelpTooltip } from './help-tooltip';

export default {
  title: 'Helpers | Help Tooltip',
};

export const _question = () => (
  <div>
    Hover over the question mark to view <HelpTooltip>This is the help message</HelpTooltip>
  </div>
);

export const _info = () => (
  <div>
    Hover over the info mark to view <HelpTooltip info>This is the help message</HelpTooltip>
  </div>
);

export const _onTop = () => (
  <div>
    Hover over the info mark to view <HelpTooltip info>This is the help message</HelpTooltip>
  </div>
);

export const _onRight = () => (
  <div>
    Hover over the info mark to view{' '}
    <HelpTooltip position="right">This is the help message</HelpTooltip>
  </div>
);

export const _onLeft = () => (
  <div>
    Hover over the info mark to view{' '}
    <HelpTooltip position="left">This is the help message</HelpTooltip>
  </div>
);

export const _withDelay = () => (
  <div>
    Hover over the info mark to view{' '}
    <HelpTooltip delay={900}> This tooltip had a 900ms delay</HelpTooltip>
  </div>
);
