@cimpress/react-components
Version:
React components to support the MCP styleguide
115 lines • 4.16 kB
JavaScript
import React from 'react';
import { CodeExample } from '@cimpress/react-components';
import TooltipCode from '!raw-loader!./tooltip.jsx';
import TooltipDemo from './tooltip.jsx';
import ComponentDoc from '../../shared/TabbedComponentDoc';
export default function TooltipDocs() {
const propInfos = [
{
name: 'className',
type: 'string',
default: '',
description: 'Can be used to manipulate the class name of the tooltip',
},
{
name: 'containerClassName',
type: 'string',
default: '',
description: 'Can be used to add class names to the tooltip target container',
},
{
name: 'children',
type: 'node (required)',
default: '',
description: 'DOM node for the tooltip to appear anchored to',
},
{
name: 'contents',
type: 'node',
default: '',
description: 'Contents for the tooltip',
},
{
name: 'variant',
type: 'string',
default: 'tooltip',
description: (React.createElement("span", null,
"Controls the appearance. One of ",
React.createElement("code", null, "tooltip"),
" or ",
React.createElement("code", null, "popover"),
".")),
},
{
name: 'direction',
type: 'string',
default: 'top',
description: (React.createElement("span", null,
"One of ",
React.createElement("code", null, "top"),
", ",
React.createElement("code", null, "right"),
", ",
React.createElement("code", null, "bottom"),
", or ",
React.createElement("code", null, "left"),
", tells the tooltip which direction to default to.")),
},
{
name: 'delay',
type: 'number',
default: '0',
description: 'Delay (in milliseconds) after which the tooltip will be shown.',
},
{
name: 'show',
type: 'boolean',
default: '',
description: 'Can be used to customize when the tooltip displays. If this prop is used, the default mouseover behavior will be disabled.',
},
{
name: 'onClickOutside',
type: 'function',
default: '',
description: 'If provided, a function to be called when a click occurs outside of this component',
},
{
name: 'style',
type: 'object',
default: '',
description: 'Can be used to add styles to the parent container',
},
{
name: 'tooltipStyle',
type: 'object',
default: '',
description: 'Can be used to add styles to the tooltip component',
},
{
name: 'tooltipInnerStyle',
type: 'object',
default: '',
description: 'Can be used to add styles to the tooltip component',
},
{
name: 'constraints',
type: 'array',
default: `[{
to: 'window',
attachment: 'together',
pin: ['left', 'right']
}]`,
description: (React.createElement("span", null,
"Allows the user to completely override the Tether ",
React.createElement("code", null, "constraints"),
" array for uniquely positioned tooltips. See the Tether.io documenation",
' ',
React.createElement("a", { href: "http://tether.io/#constraints", rel: "noopener noreferrer", target: "_blank" }, "here"),
".")),
},
];
return (React.createElement(ComponentDoc, { name: "Tooltip", propInfos: propInfos },
React.createElement(TooltipDemo, null),
React.createElement(CodeExample, { code: TooltipCode })));
}
//# sourceMappingURL=index.js.map