Showing tooltips in Xamarin Forms

Sometimes we want to show a quick piece of information by tapping on a view, this is commonly known as a tooltip. Recently I was looking how to do this and found some amazing Xamarin binding libraries available that already provides implementations to handle this, so decided to make use of them in Xamarin Forms. In this article, I will be showing how to create an effect that provides this tooltip support for any Xamarin Forms view.

Let’s Start

1- Create a RoutingEffect

First, let’s create the RoutingEffect that will be used in our shared project. We will add some attached properties so that we are able to customize our tooltip.

• HasTooltip  – Adds or removes the tooltip effect.
• TextColor  – Sets the text color for the tooltip text.
• BackgroundColor – Sets the background color for the tooltip bubble.
• Position – Sets the position where the tooltip will appear (Top, Left, Right, Bottom).
• Text– Sets the text to be displayed inside the tooltip.

2- Create an Android Platform Effect

In Android, we first install a NuGet package of an amazing Xamarin Android binding by jzeferino.

Now we can create the platform effect to support tooltips on our view.

3- Create an iOS Platform Effect

In iOS, we first install a NuGet package of an amazing Xamarin iOS binding by nmilcoff.

Now we can create the platform effect to support tooltips on our view.

4- Let’s do some XAML

In our code behind, we will add the following code so that when tapping on the main layout all the tooltips being shown get dismissed.

void Handle_Tapped(object sender, System.EventArgs e)
{
            foreach (var c in mainLayout.Children)
            {
                if (TooltipEffect.GetHasTooltip(c))
                {
                    TooltipEffect.SetHasTooltip(c, false);
                    TooltipEffect.SetHasTooltip(c, true);
                }
            }
}

Voilà!

You can find the sample project full source code here.

References

https://github.com/jzeferino/Xamarin.Android.Tooltips

https://github.com/nmilcoff/EasyTipView

Happy tooltips!