FREEoverlay

Tooltip

The Tooltip is a compact, pointer-tipped bubble that explains a control or field on demand. Power Apps has no real popover control, so this is a styled group you show with a variable — perfect for inline help, validation hints and feature explanations without cluttering the screen.

Palette:

Original palette · works in every Power Apps locale

Paste directly into Power Apps Studio

This field is required to submit.

YAML source

# Tooltip — PowerBlocks (FREE)
# A small text bubble with a pointer, shown on hover/press via a variable.
# STEP 1 — Show it from a control's OnSelect or a hover icon:  Set(varTip, true)
# STEP 2 — Paste; position it next to the element it explains.

- Tooltip:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
      X: =40
      Y: =40
      Width: =220
      Height: =60
      # To re-enable the conditional display driven by a variable, replace with:
      #   Visible: =Coalesce(varTip, false)
      # and define varTip on the parent screen (e.g. Set(varTip, true) on hover).
      Visible: =true
    Children:
      - TipBubble:
          Control: GroupContainer
          Variant: ManualLayout
          Properties:
            X: =0
            Y: =0
            Width: =220
            Height: =48
            Fill: =RGBA(31, 41, 55, 1)
            RadiusTopLeft: =10
            RadiusTopRight: =10
            RadiusBottomLeft: =10
            RadiusBottomRight: =10
            DropShadow: =DropShadow.None
          Children:
            - TipText:
                Control: Label
                Properties:
                  Text: ="This field is required to submit."
                  X: =12
                  Y: =0
                  Width: =196
                  Height: =48
                  VerticalAlign: =VerticalAlign.Middle
                  Color: =RGBA(229, 231, 235, 1)
                  Size: =11
      - TipArrow:
          Control: Image
          Properties:
            X: =24
            Y: =44
            Width: =16
            Height: =10
            Image: ="data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'><path d='M0 0 L8 10 L16 0 Z' fill='#1F2937'/></svg>")

Common use cases

Inline help

Explain an icon-only button or a field on hover/press.

Validation hints

Show why a field is required or invalid.

Onboarding nudges

Point out a feature the first time a user lands.

How to use Tooltip in Power Apps

1Set varTip from a hover icon or a control's OnSelect.
2Click "Copy YAML" — the syntax is invariant and works in every Power Apps locale.
3Paste the control and position the bubble next to its target.
4Edit the bubble text and flip the arrow if the tooltip sits below the element.

Tip — Use a context variable per tooltip (e.g. locTipName) so multiple tooltips on a screen open independently.