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