Components

Component

HelpBubble

Anchored bubble for brief contextual guidance.

ReactReact Native8 props
PreviewReact

Imports

import { HelpBubbleTrigger, HelpBubbleAnchor } from "@hozorica/hods-react/help-bubble";
import { HelpBubbleTrigger, HelpBubbleAnchor } from "@hozorica/hods-react-native/help-bubble";

Props

PropTypeDescription
title *ReactNodeMain bubble text.
descriptionReactNodeSecondary bubble text.
open / defaultOpenbooleanControlled and uncontrolled visibility.
onOpenChange(open) => voidCalled when visibility changes.
placementtop | right | bottom | left | *-start | *-endBubble position around the anchor.
showCloseButtonbooleanShows an explicit close button.
closeOnInteractOutsidebooleanCloses the bubble on outside pointer down. Defaults to true.
contentPropsobjectProps passed to the bubble content element.

Platform Support

React

Trigger/anchor bubble with controlled state, outside-click closing, close button, placement, and content props.

React Native

Anchored Pressable/View bubble with matching state and placement API.

Usage

<HelpBubbleTrigger title="도움말"><ActionButton>토글</ActionButton></HelpBubbleTrigger>

Notes

  • Use HelpBubbleTrigger when the child should toggle the bubble.
  • Use HelpBubbleAnchor when external state or defaultOpen controls visibility.