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

Show Example:
jQuery

In this example, several options of tooltips are changed. Hover over any bar to see its tooltip.


                                    

                                    

arrowLength

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

Type:

Number

Default Value: 10

Show Example:
jQuery

In this example, tooltips have a 5-pixel arrow.


                                    

                                    

border

Configures a tooltip's border.

Type:

Object

Show Example:
jQuery

In this example, several options of the tooltip's border are changed.


                                    

                                    

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.

Show Example:
jQuery

In this example, tooltips are painted in 'powderblue' using the color option.


                                    

                                    

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:
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
Show Example:
jQuery

In this example, if a tooltip represents a value greater than 0, it is painted in 'beige'.


                                    

                                    

enabled

Enables tooltips.

Type:

Boolean

Default Value: false

Show Example:
jQuery

Use the check box under the gauge to enable/disable tooltips. Hover over a bar to see the changes.


                                    

                                    

font

Specifies tooltips' font options.

Type:

Object

Show Example:
jQuery

In this example, the font of the tooltip's text is changed.


                                    

                                    

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
Show Example:
jQuery

In this example, a tooltip displays a bar value in the 'fixedPoint' format with a precision of 2. Hover over any bar to see its tooltip.


                                    

                                    

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.

Show Example:
jQuery

In this example, tooltips are displayed with a 0.45 opacity.


                                    

                                    

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

precision

Deprecated

Use the tooltip.format.precision option instead.

Specifies the precision of formatted values in a tooltip.

Type:

Number

Default Value: undefined

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.