Office-like WPF Tooltip for Hyperlinks

  • Article

You can have Office-like tooltips for the hyperlinks displayed in RichTextBox control in WPF. First thing to note is enabling the hyperlinks in RichTextBox by setting IsDocumentEnabled property. Then, we will bind the ToolTip property of the hyperlink to its NavigateUri property to be able to use it in the new DataTemplate of the ToolTip. The DataTemplate is defined so that when RichTextBox is editable the tooltip will display “Ctrl + Click to follow link” along with the navigation address, but in read-only mode the helper text will be “Click to follow link”.

OfficelikeWPFTooltipforHyperlinks_EditableRichTextBox

OfficelikeWPFTooltipforHyperlinks_ReadOnlyRichTextBox

 

 

 

 

Code Snippet

<RichTextBox Grid.Column="1" IsDocumentEnabled="True" IsReadOnly="True">

    <FlowDocument>

        <Paragraph>

            <Hyperlink NavigateUri="https://www.msdn.com">

                Go to msdn

            </Hyperlink>

        </Paragraph>

    </FlowDocument>

    <RichTextBox.Resources>

        <Style TargetType="{x:Type Hyperlink}">

            <Setter Property="ToolTip" Value="{Binding Path=NavigateUri, RelativeSource={RelativeSource Self}}"/>

        </Style>

       

        <Style TargetType="ToolTip">

            <Setter Property="ContentTemplate">

                <Setter.Value>

                    <DataTemplate>

                        <StackPanel>

                            <TextBlock Text="{Binding}"/>

                            <TextBlock x:Name="MessageTextBlock" FontWeight="Bold" Text="Ctrl + Click to follow link"/>

                        </StackPanel>

                        <DataTemplate.Triggers>

                            <DataTrigger Binding="{Binding Path=IsReadOnly, RelativeSource={RelativeSource AncestorType={x:Type RichTextBox}}}" Value="True">

                                <Setter TargetName="MessageTextBlock" Property="Text"  Value="Click to follow link"/>

                            </DataTrigger>

                        </DataTemplate.Triggers>

                    </DataTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </RichTextBox.Resources>

</RichTextBox>