DxTooltipSettings Class

Contains tooltip settings.

Assembly: DevExpress.Blazor.v24.1.dll

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 = "##.# '%' ";
}