[Solved] Getting Rid of Border around Cell Tooltips

[Oliver]

I'm displaying a thumbnail image as tooltip on one of my RadGridView Columns. The image tooltip is implemented using the ToolTipTemplate property of the GridViewDataColumn class. As it turns out the tooltip content is always displayed in a usually nice looking container with 3D border etc. but for images this doesn't look so great. Is there a way to get rid of that style on a per column basis?

[Vanya Pavlova]

Hello Oliver,

 
Generally you may always predefine the template of a ToolTip, as shown below:

<ToolTip Width="100" Height="100">
           <ToolTip.Template>
               <ControlTemplate TargetType="ToolTip">
                   <Border CornerRadius="10" Background="Yellow">
                       <ContentPresenter Margin="7" Content="{TemplateBinding Content}"/>
                   </Border>
               </ControlTemplate>
           </ToolTip.Template>

           <TextBlock Text="I am in custom tooltip"/>
       </ToolTip>

You may adjust this mark-up in the way you need. If that is not the case it could be great if you share a little bit more info about your exact settings. Thus we would be able to provide you with an appropriate solution.

Regards,
Vanya Pavlova
the Telerik team

[CD]

Hello

I still have a border around my tooltip (see attached picture)

In my xaml Grid.Resources :

<Grid.Resources>
    <Style TargetType="HyperlinkButton">
        <Setter Property="Foreground"
                Value="Red" />
    </Style>
    <DataTemplate x:Key="CustomTooltip">
        <ToolTip Width="100"
                 Height="100">
            <ToolTip.Template>
                <ControlTemplate TargetType="ToolTip">
                    <Border CornerRadius="10"
                            Background="Yellow">
                        <ContentPresenter Margin="7"
                                          Content="{TemplateBinding Content}" />
                    </Border>
                </ControlTemplate>
            </ToolTip.Template>
            <TextBlock Text="I am in custom tooltip" />
        </ToolTip>
    </DataTemplate>
</Grid.Resources>

Then in my column

<telerik:GridViewDynamicHyperlinkColumn NavigateUrlFormatString="http://page.aspx?{0}"
                                        NavigateUrlMemberPaths="RPath"
                                        TargetName="_blank"
                                        IsGroupable="False"
                                        IsFilterable="False"
                                        IsSortable="False"
                                        ToolTipTemplate="{StaticResource CustomTooltip}">
    <telerik:GridViewDynamicHyperlinkColumn.CellTemplate>
        <DataTemplate>
            <Image Source="/ConceptFormDashboard;component/Assets/new_browser_window.png" />
        </DataTemplate>
    </telerik:GridViewDynamicHyperlinkColumn.CellTemplate>
</telerik:GridViewDynamicHyperlinkColumn>

[Vanya Pavlova]

Hello Oliver,

 

This behavior occured because you have set the ToolTip's style within a DataTemplate. In this way you are predefining the ToolTip template for GridViewDynamicHyperlink column rather than to the ToolTip itself.
I changed your xaml and now you can see that the tooltip is correcty displayed.

<telerik:RadGridView  AutoGenerateColumns="False" ItemsSource="{Binding Collection}">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDynamicHyperlinkColumn DataMemberBinding="{Binding Property1}"
                                     NavigateUrlFormatString="{} http://telerik.com/{0}"
                                 TargetName="_blank"

                                        IsGroupable="False"
                                        IsFilterable="False"
                                        IsSortable="False">
    <telerik:GridViewDynamicHyperlinkColumn.CellTemplate>
        <DataTemplate>
            <Image Source="image01.png" Width="30" Height="50" Stretch="Fill">
                <ToolTipService.ToolTip>
                <ToolTip Width="100" Height="100" Content="I am a custom ToolTip">
            <ToolTip.Style>
                <Style TargetType="ToolTip">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ToolTip">
                                <Border CornerRadius="5" Background="Yellow">
                                    <ContentPresenter Margin="5" Content="{TemplateBinding Content}"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ToolTip.Style>
            </ToolTip>
            </ToolTipService.ToolTip>
                </Image>
        </DataTemplate>
    </telerik:GridViewDynamicHyperlinkColumn.CellTemplate>
</telerik:GridViewDynamicHyperlinkColumn>
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>

You may set the style within a tooltip on an any control level. 

Regards,
Vanya Pavlova
the Telerik team