React Bullet - tooltip
A tooltip is a miniature rectangle displaying widget data. The tooltip appears when the end-user hovers the cursor over the widget. You can enable/disable the tooltip, change its appearance and format its text using fields of the tooltip configuration object.
color
This option supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
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.
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 option. |
value |
The primary bullet value with applied formatting if the format option is specified. |
originalTarget |
The target bullet value assigned to the target option. |
target |
The target bullet value with applied formatting if the format option is specified. |
customizeTooltip
This option 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 option. |
value |
The primary bullet value with applied formatting if the format option is specified. |
originalTarget |
The target bullet value as it is assigned to the target option. |
target |
The target bullet value with applied formatting if the format option is specified. |
this
keyword.See Also
zIndex
If the widget's container has the CSS z-index property specified, and tooltips are displayed incorrectly, configure their z-index using this option.
If you have technical questions, please create a support ticket in the DevExpress Support Center.