DevExtreme jQuery - Overview
A tooltip is a small pop-up rectangle displaying information about a series point that the user pauses on. The information is the point value by default, but it is possible to display anything in a tooltip.
All options configuring tooltips are collected in the tooltip object. For example, to enable the tooltips, assign true to the enabled option of this object.
jQuery
JavaScript
$(function() {
$("#pieChartContainer").dxPieChart({
// ...
tooltip: {
enabled: true
}
});
});Angular
HTML
TypeScript
<dx-pie-chart ... >
<dxo-tooltip
[enabled]="true">
</dxo-tooltip>
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxPieChartModule
],
// ...
})Options declared in the tooltip object apply to all tooltips in the PieChart. If you want to customize a specific tooltip, assign a function to the customizeTooltip option. This function must return an object with options for the tooltip that you want to customize.
jQuery
JavaScript
$(function() {
$("#pieChartContainer").dxPieChart({
// ...
tooltip: {
enabled: true,
color: 'yellow',
// Tooltips of all points with the value more than 100 turn red
// Other tooltips remain yellow
customizeTooltip: function (pointInfo) {
return pointInfo.value > 100 ? { color: 'red' } : { }
}
}
});
});Angular
HTML
TypeScript
<dx-pie-chart ... >
<dxo-tooltip
[enabled]="true"
color="yellow"
[customizeTooltip]="customizeTooltip">
</dxo-tooltip>
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
// Tooltips of all points with the value more than 100 turn red
// Other tooltips remain yellow
customizeTooltip (pointInfo: any) {
return pointInfo.value > 100 ? { color: 'red' } : { }
};
}
@NgModule({
imports: [
// ...
DxPieChartModule
],
// ...
})See Also
Feedback