@open-formulieren/formio-builder/lib/esm/components/formio/tooltip.js

An opinionated Formio webform builder for Open Forms

import { jsxs as p, Fragment as m, jsx as s } from "react/jsx-runtime";
import { useFloating as g, autoUpdate as b, offset as x, flip as v, shift as h, useHover as F, useFocus as I, useDismiss as R, useRole as y, useInteractions as z } from "@floating-ui/react";
import { useState as O } from "react";
const w = ({
  text: o
}) => {
  const [t, i] = O(!1), {
    refs: r,
    floatingStyles: n,
    context: e
  } = g({
    open: t,
    onOpenChange: i,
    middleware: [x(10), v(), h()],
    whileElementsMounted: b,
    placement: "right"
  }), l = F(e, {
    move: !1,
    delay: {
      open: 0,
      close: 100
    }
  }), a = I(e), d = R(e), f = y(e, {
    role: "label"
  }), {
    getReferenceProps: c,
    getFloatingProps: u
  } = z([l, a, d, f]);
  return o ? /* @__PURE__ */ p(m, { children: [
    /* @__PURE__ */ s("i", { ref: r.setReference, className: "fa fa-question-circle text-muted", tabIndex: 0, ...c() }),
    t && /* @__PURE__ */ s("div", { ref: r.setFloating, style: {
      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,
      ...n
    }, ...u(), children: o })
  ] }) : null;
};
export {
  w as default
};