Tooltip
Usage
Tooltips provide additional context when users hover over or focus on a control. They appear near the target element and disappear when interaction ends.
YAML Export
1. Copy the YAML from the component view.
2. In Power Apps, attach tooltips using the Tooltip property or AccessibleLabel:
Button1:
Text: "Submit"
Tooltip: "Click to submit the form"
AccessibleLabel: "Submit form"
Attaching to Controls
Method 1: Tooltip Property
MyButton:
Tooltip: "{{TooltipText}}"
Method 2: AccessibleLabel (for accessibility)
MyButton:
AccessibleLabel: "{{TooltipText}}"
Placement
- Top: Above the target (default)
- Right: To the right of the target
- Bottom: Below the target
- Left: To the left of the target
Trigger Types
- Hover: Shows on mouse hover (most common)
- Focus: Shows on keyboard focus (accessibility)
- Always: Always visible (preview only)
Export Modes
- Safe: Tooltip scaffold + placement.
- Advanced: Includes delay, arrow, max width, and offsets (Pro feature).
Best Practices
- Keep tooltip text concise (1-2 lines).
- Use for helpful hints, not critical information.
- Enable arrow for better visual connection.
- Use appropriate delay to avoid accidental triggers.
- Ensure tooltips don't obstruct important content.
Note
The preview tooltip is simulated in the web app. In Power Apps, tooltips are handled natively by the platform when using the Tooltip property.