I am showing tooltip with CursorModifier. My tooltip bigger than SciChartSurface and I am using ClipModifierSurface="False" in order to show whole tooltip. But in this case axis labels and scroll bar are on top of tooltip.
Described problem can be seen on Featured Apps > Scientific Charts > Oscilloscope Demo.
Is there any way to bring tooltip on top of chart surface?
Thanks
The only way to do this is to retemplate the entire SciChartSurface to move PART_ChartModifierSurface higher than the PART_TopAxisArea / PART_LeftAxisArea / PART_BottomAxisArea / PART_RightAxisArea.
The default control template for a SciChartSurface is below. Converters are included in the SciChart library
<ControlTemplate TargetType="visuals:SciChartSurface">
<Border Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
ap:Device.SnapsToDevicePixels="True">
<visuals:MainGrid x:Name="PART_MainGrid" ap:Device.SnapsToDevicePixels="True">
<visuals:MainGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" MinWidth="10" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</visuals:MainGrid.ColumnDefinitions>
<visuals:MainGrid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" MinHeight="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</visuals:MainGrid.RowDefinitions>
<!-- Chart Title -->
<TextBlock Grid.Column="2"
Margin="0,0,0,9"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}"
Text="{TemplateBinding ChartTitle}"
Visibility="{Binding ChartTitle, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource CollapseIfNullOrEmptyStringConverter}}" />
<!-- GridLines panel (legacy, gridlines now in RenderSurface, but panel left for border and background -->
<axes:GridLinesPanel x:Name="PART_GridLinesArea"
Grid.Row="3"
Grid.Column="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsTabStop="False"
Style="{TemplateBinding GridLinesPanelStyle}"
ap:Device.SnapsToDevicePixels="True" />
<themes:PolarPanel Grid.Row="3"
Grid.Column="2"
StretchToSize="{Binding IsPolarChart, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InvertBooleanConverter}}"
ap:Device.SnapsToDevicePixels="True">
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ap:Device.SnapsToDevicePixels="True">
<!-- Annotations behind chart series -->
<a:AnnotationSurface x:Name="PART_AnnotationsUnderlaySurface"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ap:ClipToBoundsHelper.ClipToEllipseBounds="{TemplateBinding IsPolarChart}"
ap:ClipToBoundsHelper.ClipToBounds="{TemplateBinding ClipUnderlayAnnotations}"
ap:Device.SnapsToDevicePixels="True" />
<!-- Render Surface (Chart Series) -->
<ContentControl HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Content="{TemplateBinding RenderSurface}"
IsTabStop="False"
ap:ClipToBoundsHelper.ClipToEllipseBounds="{TemplateBinding IsPolarChart}"
ap:Device.SnapsToDevicePixels="True" />
<axes:AxisArea x:Name="PART_CenterYAxisArea"
ap:ClipToBoundsHelper.ClipToEllipseBounds="{TemplateBinding IsPolarChart}"
ItemsPanel="{TemplateBinding CenterYAxesPanelTemplate}"
ap:Device.SnapsToDevicePixels="True" />
<!-- Annotations over the chart series -->
<a:AnnotationSurface x:Name="PART_AnnotationsOverlaySurface"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ap:ClipToBoundsHelper.ClipToEllipseBounds="{TemplateBinding IsPolarChart}"
ap:ClipToBoundsHelper.ClipToBounds="{TemplateBinding ClipOverlayAnnotations}"
ap:Device.SnapsToDevicePixels="True" />
<!-- Modifier canvas, e.g. rubber band rectangles, rollover -->
<visuals:ChartModifierSurface x:Name="PART_ChartModifierSurface"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ClipToBounds="{TemplateBinding ClipModifierSurface}"
IsPolarChart="{TemplateBinding IsPolarChart}"
IsTabStop="False"
ap:Device.SnapsToDevicePixels="True" />
<!-- Adorners, e.g. annotation resize -->
<Canvas x:Name="PART_ChartAdornerLayer"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ap:ClipToBoundsHelper.ClipToBounds="{TemplateBinding ClipModifierSurface}"
ap:ClipToBoundsHelper.ClipToEllipseBounds="{TemplateBinding IsPolarChart}"
ap:Device.SnapsToDevicePixels="True">
<Canvas.Resources>
<Style TargetType="Thumb">
<Setter Property="BorderThickness" Value="2" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="BorderBrush" Value="{me:ThemeBinding DefaultAnnotationsGripsBorderBrush}" />
<Setter Property="Background" Value="{me:ThemeBinding DefaultAnnotationsGripsBackroundBrush}" />
<Setter Property="Width" Value="{s:Static Member=visuals:ManipulationMargins.AnnotationResizingMaxSize}" />
<Setter Property="Height" Value="{s:Static Member=visuals:ManipulationMargins.AnnotationResizingMaxSize}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Width"
To="{s:Static Member=visuals:ManipulationMargins.AnnotationResizingMaxSize}" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Height"
To="{s:Static Member=visuals:ManipulationMargins.AnnotationResizingMaxSize}" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Width"
To="{s:Static Member=visuals:ManipulationMargins.AnnotationResizingMaxSize}" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Height"
To="{s:Static Member=visuals:ManipulationMargins.AnnotationResizingMaxSize}" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="Ellipse"
Width="{s:Static Member=visuals:ManipulationMargins.AnnotationResizingThumbSize}"
Height="{s:Static Member=visuals:ManipulationMargins.AnnotationResizingThumbSize}"
Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{TemplateBinding BorderThickness}"
Effect="{Binding Source={x:Static me:EffectManager.Instance}, Path=EnableDropShadows, Converter={StaticResource EffectConverter}, ConverterParameter={StaticResource EllipseShadowEffect}}">
</Ellipse>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Canvas.Resources>
</Canvas>
</Grid>
<axes:AxisArea Name="PART_CenterXAxisArea"
ItemsPanel="{TemplateBinding CenterXAxesPanelTemplate}"
ap:Device.SnapsToDevicePixels="True" />
</themes:PolarPanel>
<!-- Chart area border only -->
<Border Grid.Row="3"
Grid.Column="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderBrush="{Binding ElementName=PART_GridLinesArea, Path=BorderBrush}"
BorderThickness="{Binding ElementName=PART_GridLinesArea, Path=BorderThickness}"
ap:Device.SnapsToDevicePixels="True" />
<!-- Axis areas -->
<axes:AxisArea x:Name="PART_TopAxisArea"
Grid.Row="2"
Grid.Column="2"
ItemsPanel="{TemplateBinding TopAxesPanelTemplate}"
Style="{StaticResource AxisAreaStyle}"
ap:Device.SnapsToDevicePixels="True" />
<axes:AxisArea x:Name="PART_LeftAxisArea"
Grid.Row="3"
Grid.Column="1"
ItemsPanel="{TemplateBinding LeftAxesPanelTemplate}"
Style="{StaticResource AxisAreaStyle}"
ap:Device.SnapsToDevicePixels="True" />
<axes:AxisArea x:Name="PART_BottomAxisArea"
Grid.Row="4"
Grid.Column="2"
ItemsPanel="{TemplateBinding BottomAxesPanelTemplate}"
Style="{StaticResource AxisAreaStyle}"
ap:Device.SnapsToDevicePixels="True" />
<axes:AxisArea x:Name="PART_RightAxisArea"
Grid.Row="3"
Grid.Column="3"
ItemsPanel="{TemplateBinding RightAxesPanelTemplate}"
Style="{StaticResource AxisAreaStyle}"
ap:Device.SnapsToDevicePixels="True" />
</visuals:MainGrid>
</Border>
</ControlTemplate>
Alternatively, I would suggest minimising tooltip size (a tooltip covering entire chart is not really usable!) or, binding to SeriesInfo output of TooltipModifier, RolloverModifier to place the data somewhere else