CODEWITHSUNDEEP
c#wpfwpf-controls
Praveen
Praveen

Reputation: 47

How to add HTML text to tooltip WPF

I have a string like "<B>Objective</B> &cl To validate requirement"

How can I display this in HTML format in the tooltip

Upvotes: 0

Views: 955

Answers (1)

Michal Diviš
Michal Diviš

Reputation: 2206

I've been wanting to do this myself in some apps and think I've got it.

First, you need a control that can display HTML. WebBrowser is definitely too much for a tooltip, so I've done some digging and found the HtmlLabel contained in HtmlRenderer.WPF nuget. It's pretty light-weight and it has transparent background, which is great since I'm using it with the Material Design Toolkit.

You can find the HtmlRenderer.WPF nuget here: https://www.nuget.org/packages/HtmlRenderer.WPF or get it with this command: Install-Package HtmlRenderer.WPF -Version 1.5.0.6

Second, you propably want to use this HTML tooltip in multiple places. The easiest way to re-use it (I think) is to make a style. Like this:

<Window
    x:Class="HtmlRendererTest.Wpf.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:htmlControls="clr-namespace:TheArtOfDev.HtmlRenderer.WPF;assembly=HtmlRenderer.WPF"
    xmlns:local="clr-namespace:HtmlRendererTest.Wpf"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    Background="#292929"
    mc:Ignorable="d">

    <Window.Resources>
        <Style TargetType="ToolTip">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <htmlControls:HtmlLabel Text="{TemplateBinding Content}" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid>
        <Button
            Padding="10"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="Hover over me"
            ToolTip="{Binding HtmlTooltip}" />
    </Grid>

</Window>

This style replaces the default control that displays the tooltip and displays it with the HtmlLabel instead.

And that's it! You can bind tooltips to HTML text now.

Here's a demo: https://github.com/michaldivis/HtmlRendererTest

Cheers, Michal.

Upvotes: 1

Related Questions