@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
36 lines (35 loc) • 1.96 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
/**
* Implements a tooltip using float-ui.
*
* Guide from https://floating-ui.com/docs/tooltip.
*/
const react_1 = require("@floating-ui/react");
const react_2 = require("react");
const Tooltip = ({ text }) => {
const [isOpen, setIsOpen] = (0, react_2.useState)(false);
const { refs, floatingStyles, context } = (0, react_1.useFloating)({
open: isOpen,
onOpenChange: setIsOpen,
middleware: [(0, react_1.offset)(10), (0, react_1.flip)(), (0, react_1.shift)()],
whileElementsMounted: react_1.autoUpdate,
placement: 'right',
});
const hover = (0, react_1.useHover)(context, {
move: false,
delay: {
open: 0,
close: 100,
},
});
const focus = (0, react_1.useFocus)(context);
const dismiss = (0, react_1.useDismiss)(context);
const role = (0, react_1.useRole)(context, { role: 'label' });
const { getReferenceProps, getFloatingProps } = (0, react_1.useInteractions)([hover, focus, dismiss, role]);
if (!text)
return null;
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", Object.assign({ ref: refs.setReference, className: "fa fa-question-circle text-muted", tabIndex: 0 }, getReferenceProps())), isOpen && ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: refs.setFloating, style: Object.assign({ maxInlineSize: 'var(--of-builder-tooltip-max-inline-size, 200px)', padding: 'var(--of-builder-tooltip-padding, 0.25rem 0.5rem)', color: 'var(--of-builder-tooltip-color, #fff)', textAlign: 'center', backgroundColor: 'var(--of-builder-tooltip-background-color, #000)', borderRadius: 'var(--of-builder-tooltip-border-radius, 0.25rem)', zIndex: 1 }, floatingStyles) }, getFloatingProps(), { children: text })))] }));
};
exports.default = Tooltip;