Vue CircularGauge - tooltip

Default Value: 10

border

Configures a tooltip's 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:

|

Element

|

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
value	Number	The raw value.
valueText	String	The formatted value converted to a string.

Name

Type

Description

value

The raw 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 the appearance of specified tooltips.

Type:

Function

Function parameters:

scaleValue:

Information on the scale value.

Object structure:

Name	Type	Description
value	Number	The raw value.
valueText	String	The formatted value converted to a string.

Name

Type

Description

value

The raw value.

valueText

The formatted value converted to a string.

Return Value:

The tooltip's configuration.

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. 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.

NOTE

As an alternative to the function’s parameter you can use the this keyword.

enabled

Enables tooltips.

Type:

Boolean

Default Value: false

font

Specifies tooltips' font properties.

Type:

format

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

Type:

Format

Default Value: undefined

See the format section for details on accepted values.

interactive

Allows users to interact with the tooltip content.

Type:

Boolean

Default Value: false

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.

Type:

zIndex

Specifies a tooltip's z-index.

Type: