JavaScript/jQuery BarGauge - 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:

HTMLElement | jQuery

Default Value: undefined

contentTemplate

Specifies a custom template for a tooltip.

Type:

template

Template Data:

Name	Type	Description
valueText	String	The formatted value converted to a string.
value	Number	The raw value.
index	Number	The index of the bar being pressed or hovered over. 0 for the bar closest to the gauge's center, 1 for the bar over it, etc.

Name

Type

Description

valueText

The formatted value converted to a string.

value

The raw value.

index

The index of the bar being pressed or hovered over. 0 for the bar closest to the gauge's center, 1 for the bar over it, etc.

Default Name: undefined

cornerRadius

Makes all the tooltip's corners rounded.

Type:

Default Value: 0, 4 (Fluent, 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:

scaleValue:

Information on the bar value.

Object structure:

Name	Type	Description
valueText	String	The formatted value converted to a string.
value	Number	The raw value.
index	Number	A zero-based index of the hovered bar. The closer this bar is to the gauge's center, the greater its index.

Name

Type

Description

valueText

The formatted value converted to a string.

value

The raw value.

index

A zero-based index of the hovered bar. The closer this bar is to the gauge's center, the greater its index.

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

NOTE

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

View Demo

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 information 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: