Tooltip

A tooltip is a brief, informative message that appears when a user interacts with an element.

import {QTooltip, QTooltipContent, QTooltipTrigger} from "@qui/react"

Overview

QUI exports 3 tooltip related components:

QTooltip: provides context and state for the tooltip.
QTooltipContent: should contain the content of the tooltip.
QTooltipTrigger: the element that activates the tooltip and serves as the tooltip's anchor.

Examples

Showcase

The default trigger for the tooltip is hover or focus. You can manually control the state for additional customization.

import {ReactNode, useState} from "react"

import {QButton, QTooltip, QTooltipContent, QTooltipTrigger} from "@qui/react"

export default function Showcase(): ReactNode {
  const [open, setOpen] = useState(false)

  return (
    <div className="grid justify-center gap-4">
      <QTooltip>
        <QTooltipTrigger>
          <QButton color="primary" variant="fill">
            Hover or Focus
          </QButton>
        </QTooltipTrigger>
        <QTooltipContent>Tooltip Content</QTooltipContent>
      </QTooltip>

      <QTooltip open={open}>
        <QTooltipTrigger>
          <QButton
            color="primary"
            onClick={() => setOpen((prevState) => !prevState)}
            variant="fill"
          >
            Click
          </QButton>
        </QTooltipTrigger>
        <QTooltipContent>Tooltip Content</QTooltipContent>
      </QTooltip>
    </div>
  )
}

Arrow

Use the arrow input to show an arrow between the tooltip and its anchor element.

import {ReactNode} from "react"

import {QButton, QTooltip, QTooltipContent, QTooltipTrigger} from "@qui/react"

export default function Arrow(): ReactNode {
  return (
    <div className="grid justify-center">
      <QTooltip arrow>
        <QTooltipTrigger>
          <QButton color="primary" variant="fill">
            Hover or Focus
          </QButton>
        </QTooltipTrigger>
        <QTooltipContent>Tooltip Content</QTooltipContent>
      </QTooltip>
    </div>
  )
}

Placement

Control the anchor origin of the tooltip using the placement property.

API

QTooltip

Name & Description	Option(s)	Default
animationDuration The CSS transition-duration of the enter and exit animations. Supply as a number to configure both transitions at once, or supply an object to configure the enter and exit transitions independently.	\| number \| { enter: number exit: number }	250
arrow Show an arrow between the component and the anchor element.	boolean	true
arrowOptions Configure the element shown when arrow is `true`.	{ className?: string fill?: string height?: number style?: CSSProperties width?: number }
autoUpdate Ensure that the component remains anchored to its reference element following screen resizes or position changes.	boolean
children React children prop.	ReactNode
defaultOpen The default value when uncontrolled.	boolean
elevation Box shadow severity of the panel, based on the five elevation styles provided by QDS. A higher number means a more severe box shadow. Supply 0 to disable the box shadow.	\| 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| '0' \| '1' \| '2' \| '3' \| '4' \| '5'
flip Whether to flip the component's placement to keep it in view.	boolean	true
focus If true, the tooltip will show when the anchor element is focused with the keyboard and hide on blur. This property is ignored if open is supplied.	boolean	true
hover If true, the tooltip will show when the anchor element is hovered. This property is ignored if open is supplied.	boolean	true
id The controlled id of the component. If not provided, a value will be used as a fallback.	string
offset The distance between the tooltip and its anchor element.	\| number \| { alignmentAxis?: number crossAxis?: number mainAxis?: number }	5
onOpenChange Callback fired when panel visibility changes. openThe updated state. eventThe event that triggered the change. reasonThe cause of the change.	( open: boolean, event?: Event, reason?: \| 'ancestor-scroll' \| 'click' \| 'escape-key' \| 'focus' \| 'hover' \| 'list-navigation' \| 'outside-press' \| 'reference-press' \| 'safe-polygon', ) => void
open The controlled state for the tooltip. Supplying this value will override hover and focus events.	boolean
placement Describes the placement of the component before FloatingUI has applied all the modifiers that may have flipped or altered the component. The final placement may differ from this input property.	\| 'top-start' \| 'top' \| 'top-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'	'top'
position CSS position attribute of the component. Can be "absolute" or "fixed".	\| 'absolute' \| 'fixed'	'absolute'
zIndex The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.	\| string \| number	1080

animationDuration

Type

| number
| {
    enter: number
    exit: number
  }

Default

Description

The CSS transition-duration of the enter and exit animations. Supply as a number to configure both transitions at once, or supply an object to configure the enter and exit transitions independently.

arrow

Type

boolean

Default

true

Description

Show an arrow between the component and the anchor element.

arrowOptions

Type

{
  className?: string
  fill?: string
  height?: number
  style?: CSSProperties
  width?: number
}

Description

Configure the element shown when arrow is true.

autoUpdate

Type

boolean

Description

Ensure that the component remains anchored to its reference element following screen resizes or position changes.

children

Type

ReactNode

Description

React children prop.

defaultOpen

Type

boolean

Description

The default value when uncontrolled.

elevation

Type

| 0
| 1
| 2
| 3
| 4
| 5
| '0'
| '1'
| '2'
| '3'
| '4'
| '5'

Description

Box shadow severity of the panel, based on the five elevation styles provided by QDS. A higher number means a more severe box shadow. Supply 0 to disable the box shadow.

flip

Type

boolean

Default

true

Description

Whether to flip the component's placement to keep it in view.

focus

Type

boolean

Default

true

Description

If true, the tooltip will show when the anchor element is focused with the keyboard and hide on blur. This property is ignored if open is supplied.

hover

Type

boolean

Default

true

Description

If true, the tooltip will show when the anchor element is hovered. This property is ignored if open is supplied.

Type

string

Description

The controlled id of the component. If not provided, a value will be used as a fallback.

offset

Type

| number
| {
    alignmentAxis?: number
    crossAxis?: number
    mainAxis?: number
  }

Default

Description

The distance between the tooltip and its anchor element.

onOpenChange

Type

(
  open: boolean,
  event?: Event,
  reason?:
    | 'ancestor-scroll'
    | 'click'
    | 'escape-key'
    | 'focus'
    | 'hover'
    | 'list-navigation'
    | 'outside-press'
    | 'reference-press'
    | 'safe-polygon',
) => void

Description

Callback fired when panel visibility changes.

openThe updated state.
eventThe event that triggered the change.
reasonThe cause of the change.

open

Type

boolean

Description

The controlled state for the tooltip. Supplying this value will override hover and focus events.

placement

Type

| 'top-start'
| 'top'
| 'top-end'
| 'bottom-start'
| 'bottom'
| 'bottom-end'
| 'left-start'
| 'left'
| 'left-end'
| 'right-start'
| 'right'
| 'right-end'

Default

'top'

Description

Describes the placement of the component before FloatingUI has applied all the modifiers that may have flipped or altered the component. The final placement may differ from this input property.

position

Type

| 'absolute'
| 'fixed'

Default

'absolute'

Description

CSS position attribute of the component. Can be "absolute" or "fixed".

zIndex

Type

| string
| number

Default

Description

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

QTooltipContent

Name & Description	Option(s)	Default
children ^* React children prop.	ReactNode
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
className The className property of the Element interface gets and sets the value of the class attribute of the specified element.	string
style The style global attribute contains CSS styling declarations to be applied to the element.	CSSProperties