import * as React from 'react';
import { initializeIcons } from '@fluentui/react';
import { TooltipHost } from '@fluentui/react/lib/Tooltip';
import { IconButton } from '@fluentui/react/lib/Button';
import { useId } from '@fluentui/react-hooks';
// Initialize icons in case this example uses them
initializeIcons();
var emojiIcon = { iconName: 'Emoji2' };
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' } };
export var ButtonIconWithTooltipExample = function (props) {
    // 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 = useId('tooltip');
    var disabled = props.disabled, checked = props.checked;
    return (React.createElement("div", null,
        React.createElement(TooltipHost, { content: "Emoji", 
            // 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(IconButton, { iconProps: emojiIcon, title: "Emoji", ariaLabel: "Emoji", disabled: disabled, checked: checked }))));
};
//# sourceMappingURL=iconTooltip.stories.js.map