JavaScript/jQuery Bullet - tooltip
A tooltip is a miniature rectangle displaying UI component data. The tooltip appears when the end-user hovers the cursor over the UI component. You can enable/disable the tooltip, change its appearance and format its text using fields of the tooltip configuration object.
color
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.
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
You can access the following pointsInfo fields.
| Field name | Description |
|---|---|
originalValue |
The primary bullet value assigned to the value property. |
value |
The primary bullet value with applied formatting if the format property is specified. |
originalTarget |
The target bullet value assigned to the target property. |
target |
The target bullet value with applied formatting if the format property is specified. |
customizeTooltip
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. |
The function's parameter has the following fields:
| Field name | Description |
|---|---|
originalValue |
The primary bullet value as it is assigned to the value property. |
value |
The primary bullet value with applied formatting if the format property is specified. |
originalTarget |
The target bullet value as it is assigned to the target property. |
target |
The target bullet value with applied formatting if the format property is specified. |
this keyword.See Also
zIndex
If the UI component's container has the CSS z-index property specified, and tooltips are displayed incorrectly, configure their z-index using this property.