JavaScript/jQuery BarGauge - tooltip

Configures tooltips.

Type:

Object

A tooltip is a miniature rectangle displaying the value of a gauge's bar. A tooltip appears when the end-user hovers the cursor over a bar. You can enable/disable tooltips, change their appearance and format their text using fields of the tooltip configuration object.

View Demo

arrowLength

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

Type:

Number

Default Value: 10

border

Configures a tooltip's border.

Type:

Object

color

Colors all tooltips.

Type:

String

Default Value: '#ffffff'

This option supports the following colors:

This option 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:

String

|

DOM Node

|

jQuery

Default Value: undefined

customizeTooltip

Allows you to change tooltip appearance.

Type:

Function

Function parameters:
scaleValue:

Object

Information on the bar value.

Object structure:
Name Type Description
value

Number

The raw value.
valueText

String

The formatted value converted to a string.
index

Number

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

Object

The tooltip's text or markup and color.

Default Value: undefined

This option should be assigned a function returning a specific object. The following fields can be specified in this object.

  • color
    Specifies the color of a tooltip.

  • text
    Specifies the text displayed by a tooltip.

  • html
    Specifies the HTML markup displayed by a tooltip.

    NOTE
    If you are going to use external resources (for example, images) in the markup, specify the size of the area they will occupy beforehand.

  • fontColor
    Specifies the color of the text displayed by a tooltip.

  • borderColor
    Specifies the color of the tooltip border.

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

View Demo

See Also

enabled

Enables tooltips.

Type:

Boolean

Default Value: false

font

Specifies tooltips' font options.

Type:

Object

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.

See Also

opacity

Specifies tooltips' transparency.

Type:

Number

Default Value: undefined

This option 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:

Number

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:

Number

Default Value: 15

DevExtreme HTML5 JavaScript Funnel Tooltips Top-Bottom Padding

shadow

Configures a tooltip's shadow.

Type:

Object

zIndex

Specifies a tooltip's z-index.

Type:

Number

Default Value: undefined

If the widget's container has the CSS z-index property specified, and tooltips are displayed incorrectly, configure their z-index using this option.