diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx index 952382cd..d42cad8a 100644 --- a/src/components/Tooltip/Tooltip.stories.tsx +++ b/src/components/Tooltip/Tooltip.stories.tsx @@ -1,24 +1,9 @@ import Icon from '../Icon' +import { placementOptions } from '../utils' import React from 'react' -import { TooltipPlacement } from 'antd/lib/tooltip' import { Meta, Story } from '@storybook/react/types-6-0' import Tooltip, { TooltipProps } from './index' -const placementOptions: TooltipPlacement[] = [ - 'bottom', - 'bottomLeft', - 'bottomRight', - 'left', - 'leftBottom', - 'leftTop', - 'right', - 'rightBottom', - 'rightTop', - 'top', - 'topLeft', - 'topRight' -] - export default { argTypes: { children: { control: { disable: true } }, @@ -26,9 +11,9 @@ export default { control: { options: placementOptions, type: 'select' - }, - defaultValue: 'right' - } + } + }, + title: { control: { type: 'text' } } }, component: Tooltip, title: 'Tooltip' diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx index 5ecea2cb..0fa3907d 100644 --- a/src/components/Tooltip/index.tsx +++ b/src/components/Tooltip/index.tsx @@ -1,6 +1,7 @@ import '../assets/styles/antdAnimations.css' import 'antd/lib/tooltip/style/index.css' import { Tooltip as AntDTooltip } from 'antd' +import cn from 'classnames' import { TooltipPlacement } from 'antd/es/tooltip' import React, { FC, ReactNode } from 'react' @@ -11,6 +12,11 @@ export interface TooltipProps { * Element tooltip should be anchored to */ children: ReactNode + /** + * Array of classes to pass to element + * @default [] + */ + classes?: string[] /** * Position of tooltip relative to the target */ @@ -23,11 +29,13 @@ export interface TooltipProps { const Tooltip: FC = ({ children, + classes = [], placement = 'right', title }: TooltipProps) => { return ( ({ [TAG]: dataTag ? `${cmpName}-${dataTag}` : cmpName }) + +export const placementOptions: TooltipPlacement[] = [ + 'bottom', + 'bottomLeft', + 'bottomRight', + 'left', + 'leftBottom', + 'leftTop', + 'right', + 'rightBottom', + 'rightTop', + 'top', + 'topLeft', + 'topRight' +]