Live demo — this example is server-driven; run the showcase locally for the interactive version.

Hint

Helpful tip or guidance — a softer alternative to Alert when the message is informational rather than time-sensitive. Often used for onboarding or to surface power-user features.

Examples

Basic

Simple title + body text — the most common shape.

Pro tip

You can drag and drop files onto the upload zone — they'll auto-upload in batches of five.

With content

Drop the title / bodyText props and use the content slot for richer markup — body + footer with an action link.

Hint with action

Need to migrate? Read the migration guide before upgrading.

Basic without title

Body text only.

A hint without a title — just the body text drawing attention to something useful.

With actions

A hint carrying an actions area (pf-m-no-offset) — here a working kebab menu.

Do more with Find it Fix it capabilities

Upgrade to Smart Management to remediate all your systems across regions and geographies.

Documentation

Hint props

Parameters accepted by {#include components/feedback/hint ... /}. Model mode: pass hint=<Hint> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Description
* `id`	String	DOM id.
`title`	String	Hint title — rendered in the `__title` div.
`bodyText`	String	Body text — convenience for the simple title + paragraph shape.
slot `content`	Qute block	For richer hints — body, footer, actions inside the hint container.

Usage

Hint vs. Alert. Hint is calm and informational — onboarding, pro tips, secondary guidance. Alert is reactive — success/warning/danger after an action.

Edit hint.html on GitHub