DxTooltipSettings.ZIndex Property

Specifies the tooltip Z-index.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public int? ZIndex { get; set; }

Property Value

Type	Default	Description
Nullable<Int32>	null	The tooltip Z-index.

Remarks

DevExpress pop-up components, such as drop-down or pop-up windows, overlap other elements. We use the z-index CSS property to arrange pop-up elements on the page. To ensure correct positioning, the components calculate z-indexes dynamically.

If the target component’s container has the CSS z-index property specified and the component overlaps tooltips, increase the ZIndex property value to display tooltips in front of the component.

The following code snippet changes the toolip Z-index:

Razor

<DxBarGauge Width="50%"
            Height="50%"
            StartValue="-5"
            EndValue="5"
            BaseValue="0"
            Values="@Values">
    @* ... *@
    <DxTooltipSettings Enabled="true"
                       Color="lightyellow" 
                       ZIndex="520">
        <DxTextFormatSettings LdmlString="@LabelFormat" />
    </DxTooltipSettings>
</DxBarGauge>

@code {
    string LabelFormat = "##.## mm;-##.## mm";
    double[] Values = new double[] { -2.13, 1.48, -3.09, 4.52, 4.9, 3.9 };
}

CSS

.dxbl-widget-container {
    position: relative;
    z-index: 500;
}