Validation Tooltip Clipped When No Space

Environment

Product Version	2019.3.1023
Product	UI for WPF

Description

The data validation error visual is clipped if it goes outside of the element that hosts it or outside of the window. This happens in the Material theme because it doesn't use a tooltip element as the other Telerik themes.

Solution

To change this behavior you can create a custom error template or modify the default one. Then apply the template using the Validation.ErrorTemplate attached property.

You can find the default data validation error template in the Telerik.Windows.Controls.Input.xaml file for the Material theme. The file contains ControlTemplates for the default error template (x:Key="StaticValidationTooltipTemplate") of the Material theme and also a version with the tooltip (x:Key="ValidationTooltipTemplate").

If you use NoXaml dlls you can directly access the "ValidationTooltipTemplate" ControlTemplate element using the StaticResource keyword and assign it to the Validation.ErrorTemplate property.

<telerik:RadComboBox Validation.ErrorTemplate="{StaticResource ValidationTooltipTemplate}" /> 

In case you use the Xaml dlls you can copy the "ValidationTooltipTemplate" ControlTemplate from the Telerik.Windows.Controls.Input.xaml file and assign it to the Validation.ErrorTemplate property.

<Window.Resources> 
    <Geometry x:Key="ArrowTopRight8x8">M0,0 L8,0 8,8 z</Geometry> 
    <ControlTemplate x:Key="ErrorTooltipTemplate" TargetType="ToolTip"> 
        <Grid x:Name="RootVisual" HorizontalAlignment="Right" RenderTransformOrigin="0 0" Opacity="0" SnapsToDevicePixels="True"> 
            <VisualStateManager.VisualStateGroups> 
                <VisualStateGroup x:Name="OpenStates"> 
                    <VisualStateGroup.Transitions> 
                        <VisualTransition GeneratedDuration="0"/> 
                        <VisualTransition To="Open" GeneratedDuration="0:0:0.3"> 
                            <Storyboard> 
                                <DoubleAnimation Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.3"> 
                                    <DoubleAnimation.EasingFunction> 
                                        <BackEase Amplitude=".4" EasingMode="EaseOut"/> 
                                    </DoubleAnimation.EasingFunction> 
                                </DoubleAnimation> 
                                <DoubleAnimation Storyboard.TargetName="RootVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.3"/> 
                            </Storyboard> 
                        </VisualTransition> 
                    </VisualStateGroup.Transitions> 
                    <VisualState x:Name="Closed"> 
                        <Storyboard> 
                            <DoubleAnimation Storyboard.TargetName="RootVisual" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/> 
                        </Storyboard> 
                    </VisualState> 
                    <VisualState x:Name="Open"> 
                        <Storyboard> 
                            <DoubleAnimation Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0" Duration="0"/> 
                            <DoubleAnimation Storyboard.TargetName="RootVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/> 
                        </Storyboard> 
                    </VisualState> 
                </VisualStateGroup> 
            </VisualStateManager.VisualStateGroups> 
            <Grid.RenderTransform> 
                <TranslateTransform x:Name="xform" X="-25"/> 
            </Grid.RenderTransform> 
            <Border Background="{telerik:MaterialResource ResourceKey=ValidationBrush}" Margin="10 0 0 0" UseLayoutRounding="True"> 
                <ContentPresenter 
                        Content="{Binding ErrorContent}" 
                        Margin="16 10 16 10" 
                        TextBlock.Foreground="{telerik:MaterialResource ResourceKey=MarkerInvertedBrush}" 
                        TextBlock.FontSize="{telerik:MaterialResource ResourceKey=FontSize}"/> 
            </Border> 
            <ContentControl/> 
        </Grid> 
    </ControlTemplate> 
 
    <ControlTemplate x:Key="ValidationTooltipTemplate"> 
        <Grid SnapsToDevicePixels="True" VerticalAlignment="Top"> 
            <Border Background="Transparent" HorizontalAlignment="Right" VerticalAlignment="Top" Width="3" Height="3"/> 
            <AdornedElementPlaceholder x:Name="Holder"/> 
            <Border BorderBrush="{telerik:MaterialResource ResourceKey=ValidationBrush}" BorderThickness="0 0 0 3"/> 
            <Path 
                    Data="{StaticResource ArrowTopRight8x8}" 
                    Fill="{telerik:MaterialResource ResourceKey=ValidationBrush}" 
                    Width="8" 
                    Height="8" 
                    HorizontalAlignment="Right" 
                    VerticalAlignment="Top"/> 
            <ToolTipService.ToolTip> 
                <ToolTip x:Name="PART_ToolTip" 
                        DataContext="{Binding RelativeSource={RelativeSource Mode=Self}, Path=PlacementTarget.DataContext}" 
                        Template="{StaticResource ErrorTooltipTemplate}" 
                        Placement="Right"/> 
            </ToolTipService.ToolTip> 
        </Grid> 
    </ControlTemplate> 
</Window.Resources> 

<telerik:RadComboBox Validation.ErrorTemplate="{StaticResource ValidationTooltipTemplate}" />