@open-formulieren/formio-builder/dist/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, n] = O(!1), {
    refs: r,
    floatingStyles: i,
    context: e
  } = g({
    open: t,
    onOpenChange: n,
    middleware: [x(10), v(), h()],
    whileElementsMounted: b,
    placement: "right"
  }), l = F(e, {
    move: !1,
    delay: {
      open: 0,
      close: 100
    }
  }), a = I(e), f = R(e), c = y(e, {
    role: "label"
  }), {
    getReferenceProps: d,
    getFloatingProps: u
  } = z([l, a, f, c]);
  return o ? /* @__PURE__ */ p(m, { children: [
    /* @__PURE__ */ s("i", { ref: r.setReference, className: "fa fa-question-circle text-muted", tabIndex: 0, ...d() }),
    t && /* @__PURE__ */ s(
      "div",
      {
        className: "offb-tooltip-content",
        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,
          ...i
        },
        ...u(),
        children: o
      }
    )
  ] }) : null;
};
export {
  w as default
};