Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxTooltipSettings Class

Contains tooltip settings.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxTooltipSettings :
    DxComplexSettingsComponent<DxTooltipSettings, TooltipSettingsModel>,
    IModelProvider<BorderSettingsModel>,
    IModelProvider<FontSettingsModel>,
    IModelProvider<TextFormatSettingsModel>,
    IModelProvider<ShadowSettingsModel>

#Remarks

Use DxTooltipSettings objects to configure tooltips for the following components:

DxBarGauge
A component that visualizes data as circular bars where each bar indicates a single value.
DxSankey
A component that depicts value flow between two entity sets.
DxSparkline
A component that visualizes value trends as an inline graph.

To enable the component’s tooltip functionality, add a DxTooltipSettings object to component markup and set its Enabled property to true.

#Component-Level Settings

The DxTooltipSettings component allows you to specify the following properties at the component level:

Color | Opacity | ArrowLength | CornerRadius
Customize tooltip appearance.
PaddingLeftRight | PaddingTopBottom
Configure paddings between tooltip edges and its content.
ZIndex
Specifies the tooltip stack order.

#Nested Objects

In addition to component-level settings, you can also add the following objects to DxTooltipSettings markup:

DxBorderSettings
Contains the element’s border settings.
DxFontSettings
Contains the element’s font settings.
DxShadowSettings
Contains settings for the element’s shadows.
DxTextFormatSettings
Contains the element’s format settings.

The following code snippet configures tooltips in the DxBarGauge component:

Bar Gauge - Tooltip Settings

Razor
<DxBarGauge Width="100%"
            Height="500px"
            StartValue="0"
            EndValue="100"
            Values="@Values">
    @* ... *@
    <DxTooltipSettings Enabled="true" Color="lightyellow" >
        <DxFontSettings Size="16" Weight="600" />
        <DxTextFormatSettings LdmlString="@LabelFormat" />
        <DxShadowSettings Blur="8" Color="purple" />
        <DxBorderSettings LineStyle="LineStyle.DashDotDot" Width="2" Color="purple" />
    </DxTooltipSettings>
</DxBarGauge>

@code {
    double[] Values = new double[] { 47.27, 65.32, 84.59, 81.86, 99 };
    string LabelFormat = "##.# '%' ";
}

#Inheritance

Object
ComponentBase
DxSettingsComponent<DevExpress.Blazor.ClientComponents.Internal.TooltipSettingsModel>
DxComplexSettingsComponent<DxTooltipSettings, DevExpress.Blazor.ClientComponents.Internal.TooltipSettingsModel>
DxTooltipSettings
See Also