Skip to main content

Tooltip Spec

Defines settings for chart tooltip.

info

Only a single Tooltip spec can be defined, if more than one is provided, only the last one will be used.

Compatible Specs

Tooltip is available for all charts excluding Metric and Wordcloud.

Overrides

  • id -> '__global__tooltip___'
  • chartType -> ChartType.Global
  • specType -> SpecType.SmallMultiples

Props

All props can be found via GroupByProps type.

Spec Props

Inherits Spec props

TooltipPortalSettings Props

Inherits TooltipPortalSettings props

type

  • Type: type: TooltipType
  • Default: TooltipType.Vertical

The type of the tooltip

snap

  • Type: snap: boolean
  • Default: true

Whenever the tooltip needs to snap to the x/band position or not

headerFormatter

  • Type: headerFormatter?: TooltipHeaderFormatter<D>

A formatter for the header value. Ignored when header is defined.

unit

  • Type: unit?: string
  • Tag: @alpha

Unit for event (i.e. time, feet, count, etc.).

customTooltip

  • Type: customTooltip?: CustomTooltip<D, SI>

Render custom tooltip given header and values.

stickTo

  • Type: stickTo?: TooltipStickTo
  • Default: mousePosition

Stick the tooltip to a specific position within the current cursor

showNullValues

  • Type: showNullValues: boolean
  • Default: false

Show null values on the tooltip

  • Type: header: 'default' | 'none' | ComponentType<{ items: TooltipValue<D, SI>[]; header: PointerValue<D> | null }>

Custom header for tooltip. Ignored when used with customTooltip.

note

This is not the table headers but spans the entire tooltip.

body

  • Type: body: 'default' | 'none' | ComponentType<{ items: TooltipValue<D, SI>[]; header: PointerValue<D> | null }>

Custom body for tooltip. Ignored when used with customTooltip.

note

This is not the table body but spans the entire tooltip.

  • Type: footer: 'default' | 'none' | ComponentType<{ items: TooltipValue<D, SI>[]; header: PointerValue<D> | null }>

Custom footer for tooltip. Ignored when used with customTooltip.

note

This is not the table footers but spans the entire tooltip.

actions

  • Type: TooltipAction<D, SI>[] | ((selected: TooltipValue<D, SI>[]) => Promise<TooltipAction<D, SI>[]> | TooltipAction<D, SI>[])

Actions to enable tooltip selection

actionsLoading

  • Type: actionsLoading: string | ComponentType<{ selected: TooltipValue<D, SI>[] }>

Shown in place of actions UI while loading async actions

noActionsLoaded

  • Type: noActionsLoaded: string | ComponentType<{ selected: TooltipValue<D, SI>[] }>

Shown in place of actions UI after loading async actions and finding none

actionPrompt

  • Type: actionPrompt: string

Prompt displayed to indicate user can right-click for contextual menu

pinningPrompt

  • Type: pinningPrompt: string

Prompt displayed to indicate user can right-click for contextual menu

selectionPrompt

  • Type: selectionPrompt: string

Prompt displayed when tooltip is pinned but all actions are hidden

maxTooltipItems

  • Type: maxTooltipItems: number

Max number of tooltip items before showing only highlighted values

maxVisibleTooltipItems

  • Type: maxVisibleTooltipItems: number

Max number of visible tooltip items before scrolling. Does not apply to custom tooltips