@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
34 lines (33 loc) • 1.8 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Implements a tooltip using float-ui.
*
* Guide from https://floating-ui.com/docs/tooltip.
*/
import { autoUpdate, flip, offset, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from '@floating-ui/react';
import { useState } from 'react';
const Tooltip = ({ text }) => {
const [isOpen, setIsOpen] = useState(false);
const { refs, floatingStyles, context } = useFloating({
open: isOpen,
onOpenChange: setIsOpen,
middleware: [offset(10), flip(), shift()],
whileElementsMounted: autoUpdate,
placement: 'right',
});
const hover = useHover(context, {
move: false,
delay: {
open: 0,
close: 100,
},
});
const focus = useFocus(context);
const dismiss = useDismiss(context);
const role = useRole(context, { role: 'label' });
const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
if (!text)
return null;
return (_jsxs(_Fragment, { children: [_jsx("i", Object.assign({ ref: refs.setReference, className: "fa fa-question-circle text-muted", tabIndex: 0 }, getReferenceProps())), isOpen && (_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 })))] }));
};
export default Tooltip;