"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TooltipBasicExample = void 0;
var React = require("react");
var Button_1 = require("@fluentui/react/lib-commonjs/Button");
var Tooltip_1 = require("@fluentui/react/lib-commonjs/Tooltip");
var react_hooks_1 = require("@fluentui/react-hooks");
var calloutProps = { gapSpace: 0 };
// The TooltipHost root uses display: inline by default.
// If that's causing sizing issues or tooltip positioning issues, try overriding to inline-block.
var hostStyles = { root: { display: 'inline-block' } };
var TooltipBasicExample = function () {
    // Use useId() to ensure that the ID is unique on the page.
    // (It's also okay to use a plain string and manually ensure uniqueness.)
    var tooltipId = react_hooks_1.useId('tooltip');
    return (React.createElement("div", null,
        React.createElement(Tooltip_1.TooltipHost, { content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been\n        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type\n        and scrambled it to make a type specimen book.", 
            // This id is used on the tooltip itself, not the host
            // (so an element with this id only exists when the tooltip is shown)
            id: tooltipId, calloutProps: calloutProps, styles: hostStyles },
            React.createElement(Button_1.DefaultButton, { "aria-describedby": tooltipId }, "Hover over me"))));
};
exports.TooltipBasicExample = TooltipBasicExample;
//# sourceMappingURL=tooltip.stories.js.map