Tooltip

import {Tooltip} from "@qui/react-vscode"

Examples

Showcase

Theme:

Dark Modern

import type {ReactElement} from "react"

import {
  Button,
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@qui/react-vscode"

export default function Showcase(): ReactElement {
  return (
    <Tooltip>
      <TooltipTrigger>
        <Button>Hover or Focus</Button>
      </TooltipTrigger>
      <TooltipContent>Tooltip Content</TooltipContent>
    </Tooltip>
  )
}

API

TooltipProps

Name & Description	Option(s)	Default
children ^* React children prop.	ReactNode
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 }	80
autoUpdate Ensure that the component remains anchored to its reference element following screen resizes or position changes.	boolean
defaultOpen The default value when uncontrolled.	boolean
flip Whether to flip the component's placement to keep it in view.	boolean	true
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
offset The distance between the tooltip and its anchor element.	\| number \| { alignmentAxis?: number crossAxis?: number mainAxis?: number }	5
open The controlled state for the tooltip. Supplying this value will override hover and focus events.	boolean
openOnFocus If true, the component will show when the anchor element is focused. This property is ignored if open is supplied.	boolean	false
openOnHover If true, the component will show when the anchor element is hovered. This property is ignored if open is supplied.	boolean	false
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

children

Type

ReactNode

Description

React children prop.

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.

autoUpdate

Type

boolean

Description

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

defaultOpen

Type

boolean

Description

The default value when uncontrolled.

flip

Type

boolean

Default

true

Description

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

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

offset

Type

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

Default

Description

The distance between the tooltip and its anchor element.

open

Type

boolean

Description

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

openOnFocus

Type

boolean

Default

false

Description

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

openOnHover

Type

boolean

Default

false

Description

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

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.

Tabs

React VSCode