UI

Implementing Google’s Material Design for tooltips using Power Apps

by Hardit Bhatia

Since implementing Google's Material Design for text fields (read here & watch here) a couple of months ago, I have been reviewing their design for other controls. The two that stood out to me were: tooltips and buttons. I will describe the approach I took starting from why/how I chose these controls to the properties you need to set to make these work! In this post, I will cover tooltips followed by another to cover buttons.

The reasons I picked these (and even the text field) are:

  1. The standard out of the box (OOB) versions, while good, do not provide many customization capabilities
  2. The design for these controls was very different, so there was a greater scope of improvement
  3. These looked way better than their OOB counterparts, helping Power Apps look as pretty, if not prettier than any other app on our phones
  4. Tooltips interested me the most because
    • honestly, they were the easiest to implement!!!
    • on a serious note, the OOB tooltips don't show up on mobile as there is no way to "hover"

Once the controls were chosen, I read through the design document for tooltips and summarized it as below:

  1. They should become visible when a user taps onto a control, like a text input field
  2. When visible, they should display a text label providing a description of the control
  3. They should stay visible for 1.5 seconds or until the user changes focus to another control

With these pointers in mind, the goal was pretty clear. It was just about putting these into action. Here are the steps describing the approach:

  1. Tooltip was pretty straightforward, so I straightaway started off with adding the necessary controls
  2. Below one of my Google Material Design text input controls, I first added a label
  3. Set the properties of the label as follows:
    • Text property to a short text describing or giving additional info pertaining to the text input control
    • DisplayMode property to Disabled
    • Left and Right padding = 16
    • Width to a value so that the text is completely visible
    • Height = 32
    • X position so it is centered with respect to the text input control
    • Y position so the tooltip is slightly below the bottom of the text input control
    • DisabledFill to the same color as the color of the bar at the base of the text input control when its in focus
    • Visible property to a variable (I called it displaytootip)
  4. Once I added a label, I needed a way to hide it in 1.5 seconds for which I needed the help of a timer
  5. Add a timer and set the properties as follows:
    • Duration = 1500 (1.5 seconds)
    • OnTimerEnd = Set(displaytooltip, false)
    • Reset = !displaytooltip
    • displaytooltip
    • Visible set to false
  6. Add Set(displaytooltip, true) to the OnSelect property of the text input control so that the tooltip becomes visible when a user taps into the text input control
  7. The only thing remaining was to hide the tooltip even earlier than 1.5 seconds when a user taps on another control or anywhere else on the screen. For this, I added Set(displaytooltip, false) to all other controls on the screen and to the blank label that covers the entire screen to allow hiding of controls as needed (this was added to the screen when I had created a text input control as per my earlier post)
  8. With this, the tooltip was all set!

Here is how a working demo:

This will help Power Apps developers to have customizable tooltips that will work on mobile too!

Have fun! Get addicted!

Leave a Reply