"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TooltipExample = void 0;
var React = require("react");
var react_tooltip_1 = require("@fluentui/react-tooltip");
var react_theme_provider_1 = require("@fluentui/react-theme-provider");
var react_theme_1 = require("@fluentui/react-theme");
var react_make_styles_1 = require("@fluentui/react-make-styles");
var useStyles = react_make_styles_1.makeStyles({
    target: {
        width: '128px',
        height: '128px',
        margin: '64px',
        background: 'lightgray',
        border: '1px solid darkgray',
    },
});
var TooltipExample = function () { return (React.createElement(react_theme_provider_1.ThemeProvider, { theme: react_theme_1.webLightTheme },
    React.createElement(TooltipExampleCore, null))); };
exports.TooltipExample = TooltipExample;
var TooltipExampleCore = function () {
    var styles = useStyles();
    var refs = [
        { tooltip: React.useRef(null), target: React.useRef(null) },
        { tooltip: React.useRef(null), target: React.useRef(null) },
        { tooltip: React.useRef(null), target: React.useRef(null) },
    ];
    // eslint-disable-next-line no-restricted-properties
    React.useLayoutEffect(function () {
        refs.forEach(function (ref) {
            if (ref.tooltip.current && ref.target.current) {
                ref.tooltip.current.show(ref.target.current);
            }
        });
    });
    return (React.createElement("div", null,
        React.createElement("h1", null, "Basic tooltips"),
        React.createElement("div", { style: { display: 'flex', gap: '10px', margin: '20px 0' } },
            React.createElement("div", { className: styles.target, ref: refs[0].target }),
            React.createElement(react_tooltip_1.Tooltip, { componentRef: refs[0].tooltip }, "Default"),
            React.createElement("div", { className: styles.target, ref: refs[1].target }),
            React.createElement(react_tooltip_1.Tooltip, { componentRef: refs[1].tooltip, noArrow: true }, "No arrow"),
            React.createElement("div", { className: styles.target, ref: refs[2].target }),
            React.createElement(react_tooltip_1.Tooltip, { componentRef: refs[2].tooltip, subtle: true }, "Subtle"))));
};
//# sourceMappingURL=Tooltip.stories.js.map