ChartTooltip
Configures interactive tooltips that appear when users hover over chart data points. Provides contextual information, data values, and formatted details for enhanced user experience. Essential for making charts interactive and informative without cluttering the visualization. Supports custom templates, shared tooltips across series, and advanced formatting options. Use to display detailed data values, percentages, dates, and custom contextual information.
Definition
Namespace:Telerik.Blazor.Components
Assembly:Telerik.Blazor.dll
Syntax:
public class ChartTooltip : ChartTooltipBase, IComponent, IHandleEvent, IHandleAfterRender, IDisposableInheritance: objectComponentBaseDataVizChildComponentChartSeriesTooltipBaseChartTooltipBaseChartTooltip...
Implements:
Inherited Members
Constructors
public ChartTooltip()Properties
Controls whether the chart tooltip automatically hides when the mouse leaves the target chart element. When set to true, the tooltip disappears automatically on mouse leave. When false, a close button is displayed within the tooltip for manual dismissal. Use this to control tooltip behavior based on user interaction preferences and chart complexity. Example: Set to false for complex tooltips with interactive content that users may need time to read or interact with.
[Parameter]
public bool? AutoHide { get; set; }Sets the background color of the chart tooltip container. Accepts any valid CSS color value including hex codes (#f8f9fa), RGB values (rgb(248,249,250)), or color names (lightgray). Use this to match tooltip styling with your application theme and ensure proper contrast for tooltip content readability. Example: Set to "rgba(255,255,255,0.95)" for a semi-transparent white background that doesn't completely obscure chart data.
[Parameter]
public string Background { get; set; }[Parameter]
public RenderFragment ChildContent { get; set; }Sets the text color for all content within the chart tooltip. Accepts any valid CSS color value including hex codes (#333333), RGB values (rgb(51,51,51)), or color names (black). Use this to ensure tooltip text has appropriate contrast against the background and maintains readability across different themes. Example: Set to "#ffffff" when using dark tooltip backgrounds, or "#2c3e50" for professional dark text on light backgrounds.
[Parameter]
public string Color { get; set; }Sets the font properties for tooltip text using CSS font syntax. Accepts standard CSS font shorthand notation including font-weight, font-size, and font-family specifications. Use this to ensure tooltip typography matches your application's design system and maintains consistency with other UI elements. Example: Set to "12px Arial" for compact tooltips, or "bold 14px 'Segoe UI'" for more prominent tooltip displays.
[Parameter]
public string Font { get; set; }Sets the transparency level of the entire tooltip container. Accepts values between 0 (completely transparent) and 1 (completely opaque) to control tooltip visibility. Use this to create subtle tooltip presentations that don't completely obscure underlying chart data while maintaining readability. Example: Set to 0.9 for slightly transparent tooltips, or 0.8 for more transparency when overlaying dense chart areas.
[Parameter]
public double? Opacity { get; set; }Controls whether tooltips are displayed when users hover over chart elements. When set to true, tooltips appear on hover to show additional data context. When false, no tooltips are shown. Use this to enable or disable the tooltip feature based on chart complexity, user preferences, or display requirements. Example: Set to true for data-rich charts where users need detailed hover information, or false for simple charts where tooltips might be distracting.
[Parameter]
public bool? Visible { get; set; }Methods
protected override void BuildRenderTree(RenderTreeBuilder __builder)Overrides:
protected override void OnInitialized()Overrides:
protected override void OnParametersSet()Overrides: