React TreeMap - tooltip

arrowLength

Specifies the length of a tooltip's arrow in pixels.

Type:

Default Value: 10

border

Configures a tooltip's border.

Selector: Border

Type:

color

Colors all tooltips.

Type:

Default Value: '#ffffff'

This property supports the following colors:

Hexadecimal colors
RGB colors
RGBA colors
Predefined/cross-browser color names
Predefined SVG colors
Paint server address

This property sets one color for all tooltips. You can specify a particular tooltip's color in the tooltip.customizeTooltip function.

container

Specifies the container in which to draw tooltips. The default container is the HTML DOM <body> element.

Type:

HTMLElement | jQuery

Default Value: undefined

contentComponent

An alias for the contentTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

contentRender

An alias for the contentTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

contentTemplate

Specifies a custom template for a tooltip.

Type:

template

Template Data:

Name	Type	Description
node	TreeMap Node	The Node object.
value	Number	The raw node value.
valueText	String	The formatted value converted to a string.

Name

Type

Description

node

TreeMap Node

The Node object.

value

The raw node value.

valueText

The formatted value converted to a string.

Default Name: undefined

cornerRadius

Makes all the tooltip's corners rounded.

Type:

Default Value: 0, 4 (Material)

The following table demonstrates how the corner's curvature depends on the cornerRadius value:

cornerRadius	Result
`cornerRadius: 0`
`cornerRadius: 15`
`cornerRadius: 35`

customizeTooltip

Allows you to change tooltip appearance.

Type:

Function

Function parameters:

info:

Information on the node being pressed or hovered over with the mouse pointer.

Object structure:

Name	Type	Description
node	TreeMap Node	The Node object.
value	Number	The raw node value.
valueText	String	The formatted value converted to a string.

Name

Type

Description

node

TreeMap Node

The Node object.

value

The raw node value.

valueText

The formatted value converted to a string.

Return Value:

The tooltip's text or markup and color.

Default Value: undefined

This property should be assigned a function that returns an object with the following fields:

Field name	Description
`text`	The tooltip's text.
`html`	The HTML markup displayed in a tooltip. The TreeMap evaluates the markup. Make sure that it does not contain malicious code. Refer to the following help topic for more information: Potentially Vulnerable API - customizeTooltip. To use external resources (for example, images) in the markup, specify the size of the area they occupy beforehand.
`color`	The tooltip's color.
`fontColor`	The color of the tooltip's text.
`borderColor`	The color of the tooltip's border.

enabled

Enables tooltips.

Type:

Boolean

Default Value: false

font

Specifies tooltips' font properties.

Selector: Font

Type:

format

Formats a value before it is displayed it in a tooltip.

Selector: Format

Type:

Format

Default Value: undefined

See the format section for information on accepted values.

opacity

Specifies tooltips' transparency.

Type:

Default Value: undefined

This property accepts a value from 0 to 1, where 0 makes tooltips completely transparent, and 1 makes them opaque.

paddingLeftRight

Generates an empty space, measured in pixels, between a tooltip's left/right border and its text.

Type:

Default Value: 18

DevExtreme HTML5 JavaScript Funnel Tooltips Left-Right Padding

paddingTopBottom

Generates an empty space, measured in pixels, between a tooltip's top/bottom border and its text.

Type:

Default Value: 15

DevExtreme HTML5 JavaScript Funnel Tooltips Top-Bottom Padding

shadow

Configures a tooltip's shadow.

Selector: Shadow

Type:

zIndex

Specifies a tooltip's z-index.

Type: