@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
55 lines (51 loc) • 2.77 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_factory = require('../motion/factory.cjs');
const require_portal = require('../portal/portal.cjs');
const require_popover = require('../popover/popover.cjs');
const require_tooltip_style = require('./tooltip.style.cjs');
const require_use_tooltip = require('./use-tooltip.cjs');
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
let motion_react = require("motion/react");
motion_react = require_rolldown_runtime.__toESM(motion_react);
//#region src/components/tooltip/tooltip.tsx
const { PropsContext: TooltipPropsContext, StyleContext, usePropsContext: useTooltipPropsContext, withContext, useRootComponentProps } = require_create_component.createSlotComponent("tooltip", require_tooltip_style.tooltipStyle);
/**
* `Tooltip` is a component that displays short information, such as supplementary details for an element.
*
* @see https://yamada-ui.com/docs/components/tooltip
*/
const Tooltip = (props) => {
const [context, { animationScheme = "scale", children, content, duration = .1, contentProps, portalProps,...rest }] = useRootComponentProps(props);
const { open, getContentProps, getPositionerProps, getTriggerProps } = require_use_tooltip.useTooltip(rest);
if (!content) return children;
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyleContext, {
value: context,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
asChild: true,
...getTriggerProps(),
children
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, { children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_portal.Portal, {
...portalProps,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipPositioner, {
...getPositionerProps(),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
...require_popover.getPopupAnimationProps(animationScheme, duration),
...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(contentProps))),
children: content
})
})
}) : null })]
});
};
const TooltipPositioner = withContext("div", "positioner")();
const TooltipTrigger = withContext("button", "trigger")();
const TooltipContent = withContext(require_factory.motion.div, "content")();
//#endregion
exports.Tooltip = Tooltip;
exports.TooltipPropsContext = TooltipPropsContext;
exports.useTooltipPropsContext = useTooltipPropsContext;
//# sourceMappingURL=tooltip.cjs.map