How to customize tool tip window to have arrow in wpf

Question

How to customize tooltip window to have a corner arrow like shown below in WPF(xaml).

I have my code like below

 <Image x:Name="imgInfoTab">
            <Image.ToolTip>
      <ToolTip Background="WhiteSmoke" HasDropShadow="True" 
       Cursor="Hand">
          <TextBlock Width="250" Height="250"                                                         
      TextWrapping="WrapWithOverflow"                                                                                                                             
       Cursor="Hand">                                                   
        </TextBlock>
        </ToolTip>
       </Image.ToolTip>
        </Image>

It looks as below with above code,

Does this answer your question? [How to style WPF tooltip like a speech bubble?](https://stackoverflow.com/questions/11446250/how-to-style-wpf-tooltip-like-a-speech-bubble) — Keith Stein, May 29 '20 at 23:21

score 0 · Accepted Answer · answered May 30 '20 at 04:13

0

Try this:

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="CornflowerBlue">
    <Grid.ToolTip>
        <ToolTip Placement="MousePoint" HorizontalOffset="50">
            <ToolTip.Template>
                <ControlTemplate TargetType="ToolTip">
                    <Grid>
                        <Path Fill="White" Data="M 0,10 L 40,10 50,0 60,10 100,10 100,60 0,60" />
                        <TextBlock Text="Hello World!" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Grid>
                </ControlTemplate>
            </ToolTip.Template>
        </ToolTip>
    </Grid.ToolTip>
</Grid>

If you want it auto-sizing then you'll need to do a bit more work, but that will get you started.

answered May 30 '20 at 04:13

Mark Feldman

15,731
3
31
58

I suppose you meant `HorizontalOffset="-50"`, i find it visually better with a little `VerticalOffset="5"` – Cfun May 30 '20 at 07:10
Interesting. `HorizontalOffset="50"` produces the correct result on my machine, while `HorizontalOffset="-50" does not. – Mark Feldman May 30 '20 at 12:35
Yes Interesting ! – Cfun May 30 '20 at 13:47
Hey, It works but i don't understand what is data in path and how to increase width and height of it as at present I have a huge content to show and not just "Hello world!" – Diksha Mundhra Jun 01 '20 at 02:58

How to customize tool tip window to have arrow in wpf

1 Answers1