In this tutorial, we will look at how to create simple pop-up tooltips for your app. These tooltips can be shown on command, and also programatically, and can be used as a nice way to guide a user through your features.

In the demo, we show how to trigger a tooltip by tapping on a button, as well as how to create a tooltip walkthrough flow. Tooltips are a great way to highlight various areas of your app to your users.

We notice that in the video, we have a problem when immediately displaying a second tooltip(while the first is still dismissing), and use a timer/delay to show the next one.

UPDATE: I have uploaded a new copy of the sourcecode for the project which uses 3 popTip variables, instead of reusing 1, which greatly improves the experience and is a more recommended solution.

For the project, we utilise the AMPopTip tooltip code by Andrea Mazzini. I decided to use this git code because it is lightweight, customisable, easy to use, and has very little overhead.

If you have any questions, comments or problems with this tutorial, please ask below. Else we would love to see how you have used tooltips in your apps!

Link to AMPopTip on GitHub
ToolTipDemo Tutorial Sourcecode

0