Skip to main content
All docs
V25.1
  • DxTooltipSettings Class

    Contains tooltip settings.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.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.
    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

    <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