Showing custom tooltip?/Popup when hovering over an object in Silverlight

Question

How can I go about getting similar popup/hover/tooltip (see image below) when I hover or click on an object in my Silverlight app?

Update: (added bounty)

I am looking for a control which can drop a shadow and show the arrow. I want like 3-4 lines of data which I can pass in as the control's properties.

Answer 1

Expression Blend 4 has this kind of callout shape and you can apply a <DropShadowEffect/> to it. To put text inside, just wrap a textbox and the callout in a canvas. From this site:

Expression Blend 4 now includes presets for the easy creation of arcs, arrows, callouts, and polygons. Shapes can be easily switched between sketch-style and regular-style rendering. This feature can be found in the Assets panel under the new Shapes category.

I've used the callouts - very handy and very similar in usage to AutoShapes in Office. To do a pop-up, you'll just need a simple animation.

If you don't have Expressions, you could hand-code the XAML for creating the callout. Here's an example of one that I made:

<Path x:Name="Callout" Height="218" Width="197" Stroke="Black" StrokeThickness="2" Fill="WhiteSmoke" Canvas.Top="60" Canvas.Left="53" Stretch="Fill">
    <Path.Effect>
        <DropShadowEffect ShadowDepth="50" Opacity="0.25" BlurRadius="10"  />
    </Path.Effect>
    <Path.Data>
        <PathGeometry>
          <PathGeometry.Figures>
            <PathFigure StartPoint="0 21.1" IsClosed="True">
              <PathFigure.Segments>
                <ArcSegment Point="21.1 0" Size="21.1 21.1" SweepDirection="Clockwise" />
                <LineSegment Point="31.66 0" />
                <LineSegment Point="79.14 0" />
                <LineSegment Point="168.83 0" />
                <ArcSegment Point="189.93 21.1" Size="21.1 21.1" SweepDirection="Clockwise" />
                <LineSegment Point="189.93 73.86" />
                <LineSegment Point="189.93 105.52" />
                <ArcSegment Point="168.83 126.62" Size="21.1 21.1" SweepDirection="Clockwise" />
                <LineSegment Point="79.14 126.62" />
                <LineSegment Point="30.57 213.21" />
                <LineSegment Point="31.66 126.62" />
                <LineSegment Point="21.1 126.62" />
                <ArcSegment Point="0 105.52" Size="21.1 21.1" SweepDirection="Clockwise" />
                <LineSegment Point="0 105.52" />
                <LineSegment Point="0 73.86" />
              </PathFigure.Segments>
            </PathFigure>
          </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

The callout's tail isn't exactly like the one in the sample and the dropshadow is also different, but different values can be changed to try to make it look as close as possible to the sample.