Grapes homepage1.57.0
  • Guide
  • Tokens
  • Components
    Grapes on GithubGrapes on Figma
    Interaction
    • Button
    • IconButton
    • FloatingActionBar
    • Link
    Icons
    • Icon
    • HighlightIcon
    Form
    • AmountInput
    • Autocomplete
    • AutocompleteMultiple
    • AutocompletePlace
    • CheckboxBox
    • CheckboxField
    • DatePicker
    • FormField
    • Input
    • OptionGroup
    • PasswordInput
    • PhoneInput
    • RadioBox
    • RadioField
    • RadioGroup
    • Select
    • SwitchField
    • TextArea
    • TextInput
    • Upload
    • UploadButton
    Feedback
    • Badge
    • Banner
    • Callout
    • EmptyState
    • Modal
    • ModalSlideshow
    • DeprecatedModalSlideshow
    • PageModal
    • Skeleton
    • Tag
    • Toast
    • Tooltip
    Data display
    • Accordion
    • Avatar
    • Box
    • Calendar
    • CalendarRange
    • CollapsibleList
    • FileCard
    • InfoTip
    • ListBox
    • ListView
    • Panel
    • SidePanel
    • DeprecatedPreview
    • Table
    • Timeline
    • useDateFormatter
    Navigation
    • DropdownItem
    • DropdownMenu
    • Navigation
    • NavigationItem
    • Popover
    • Tabs

    Tooltip

    Displays informative text when users hover an element.

    View source code
    • Usage
    • Props
    • children
      ReactNode

      The content around which the tooltip will go

    • content
      ReactNode | ReactNode[]

      The tooltip's content

    • isDisabled
      boolean

      Whether the tooltip should be disabled

      Default: false
    • isInitialOpen
      boolean

      Whether the button should be disabled

      Default: false
    • isOpen
      boolean

      Whether the tooltip should be open

    • maxWidth
      number

      The maximum width of the tooltip

      Default: 232
    • offset
      number

      The offset of the tooltip from its trigger.

      Default: 10
    • onOpenChange
      (isOpen: boolean) => void

      Allows to control when the tooltip is open

    • paddingBoundary
      number

      Padding around the viewport

      Default: 8px
    • placement
      "bottom-end" | "bottom-start" | "bottom" | "left-end" | "left-start" | "left" | "right-end" | "right-start" | "right" | "top-end" | "top-start" | "top"

      Specifies where the tooltip should be positioned

      Default: top
    • triggerAsChild
      boolean

      Whether the trigger is a custom element @see https://grapes.spendesk.design/docs/components/tooltip#triggeraschild-and-forwardref

      Default: false