@cimpress/react-components/dist/docs/components/tooltip/index.js

React components to support the MCP styleguide

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = TooltipDocs;
const react_1 = __importDefault(require("react"));
const react_components_1 = require("@cimpress/react-components");
const tooltip_jsx_1 = __importDefault(require("!raw-loader!./tooltip.jsx"));
const tooltip_jsx_2 = __importDefault(require("./tooltip.jsx"));
const TabbedComponentDoc_1 = __importDefault(require("../../shared/TabbedComponentDoc"));
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_1.default.createElement("span", null,
                "Controls the appearance. One of ",
                react_1.default.createElement("code", null, "tooltip"),
                " or ",
                react_1.default.createElement("code", null, "popover"),
                ".")),
        },
        {
            name: 'direction',
            type: 'string',
            default: 'top',
            description: (react_1.default.createElement("span", null,
                "One of ",
                react_1.default.createElement("code", null, "top"),
                ", ",
                react_1.default.createElement("code", null, "right"),
                ", ",
                react_1.default.createElement("code", null, "bottom"),
                ", or ",
                react_1.default.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_1.default.createElement("span", null,
                "Allows the user to completely override the Tether ",
                react_1.default.createElement("code", null, "constraints"),
                " array for uniquely positioned tooltips. See the Tether.io documenation",
                ' ',
                react_1.default.createElement("a", { href: "http://tether.io/#constraints", rel: "noopener noreferrer", target: "_blank" }, "here"),
                ".")),
        },
    ];
    return (react_1.default.createElement(TabbedComponentDoc_1.default, { name: "Tooltip", propInfos: propInfos },
        react_1.default.createElement(tooltip_jsx_2.default, null),
        react_1.default.createElement(react_components_1.CodeExample, { code: tooltip_jsx_1.default })));
}
//# sourceMappingURL=index.js.map