Skip to main content
All docs
V24.1

DxTooltipSettings Class

Contains tooltip settings.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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.
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

<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