How to Add Rich Tooltips and Help Links in Power Apps

Inline help sounds simple until you try to ship it in a canvas app. You want a short explanation next to a field, maybe a bullet list, maybe a link to your wiki. Out-of-the-box Tooltip text is a single plain string. Anything richer usually means extra labels, creative layout, or custom PCF.

This post compares two paths: what you can do with standard canvas controls (the hard way), and adding the Power Components Kit Tooltip code component (the easy way). Same outcome: users see guidance where they need it, and you stay out of the script editor.

Why inline help and tooltips matter

When someone hesitates on a field, they either guess, open a ticket, or abandon the task. A one-line hint or a “what goes here?” popup cuts that friction. If you can add a help icon that jumps to deeper docs, even better. That pattern is normal on the web. In Power Apps it takes a bit more planning.

Method 1: The hard way (labels and workarounds)

In canvas apps you can approximate richer help without a dedicated code component. Here is the shape of it.

Pattern A: Tooltip text only

Many controls expose a Tooltip property. It is a single plain-text string: no headings, no list markup, no link inside the tooltip. Canvas Power Fx also does not give you a general-purpose Hover property or OnHover event on controls, so you cannot treat “mouse over this label” like a custom event the way you might in other UI frameworks. For one short sentence that appears with the platform tooltip behavior, use Tooltip.

Pattern B: Native Info button (modern control)

Canvas apps include the modern Info button control. Per Microsoft Learn, it shows Content in a flyout when the user selects over the icon, showing useful contextual help without stacking your own icon and label. The Content property is for text (documentation describes plain text and formatted content in the flyout), not arbitrary HTML: you do not get the same “paste HTML, sanitize, and show lists or links inside the tooltip body” workflow as a dedicated code component. If you need a separate outbound link, you still combine it with another control (for example a Launch formula or link control) and keep the mental model straight for users.

Pattern C: Visible label + separate link

1. Add a Button or Image as the help affordance.
2. Add a Label (or HTML text control) for longer content. Toggle Visible with a variable in OnSelect when the user taps the icon (or use another pattern that fits your screen).

You end up managing:

• Visibility state (What opens and closes the panel? Does it clash with the screen layout?)
• Layout (Alignment on narrow screens, tab order, focus)
• Consistency (Every screen repeats the same pattern with different control names)

Pattern D: HTML via PCF or hosted content

If you truly need rich HTML everywhere, someone eventually writes PCF or hosts content elsewhere. That is powerful and also ongoing maintenance: builds, signing, solution versions, and security reviews.

Where the hard way gets brittle

• Reuse: Copy-pasting the same icon + label + formula stack across screens drifts over time.
• Accessibility: Keyboard focus, Escape to dismiss, and screen reader names are easy to get wrong when you wire it by hand.
• Links: Native tooltips will not give you “paragraph + link” in one place. You are always composing multiple controls.

None of this is impossible. It is just repetitive. I prefer to spend that time on app logic, not another custom help stack.

Method 2: The easy way (Tooltip component)

The Tooltip component from Power Components Kit is built for this exact job in canvas apps: one control, properties in Studio, Fluent styling.

What you configure

• Tooltip Content: Plain text or HTML. You decide how rich it is. The component sanitizes it so scripts and typical XSS patterns do not run.
• Link Url: Optional. If set, clicking the icon opens that URL (new tab by default; you can switch to same tab).
• Icon: Fluent options like Info, Help, QuestionCircle, Bookmark, Lightbulb.
• Accessibility Label: Optional override so screen readers hear something clearer than a generic “more information.”

Add it like any other code component: Insert → Get more components → your imported solution, then bind the properties.

When this makes sense

• You want rich tooltip content without owning sanitization yourself.
• You want a help icon that links out without hand-building separate show/hide and link controls.
• You want one canvas app pattern with consistent Fluent styling across screens.

→ See the Tooltip component page for pricing and details.

Conclusion and next steps

If you only need a single plain sentence, the built-in Tooltip property or the modern Info button might be enough. If you are maintaining stacks of labels and icons across a big app, or you know you will need HTML and links, a purpose-built control saves time and keeps behavior consistent.

→ Get the Tooltip component when you are ready to try the easy path. If you are still on the fence, skim the property list on the component page and see if it matches how you already explain fields to users.