Skip to content

feat(tooltip): add pf-v6-tooltip element #3141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bennypowers wants to merge 13 commits into
base: staging/pfv6
Choose a base branch
from
Open

feat(tooltip): add pf-v6-tooltip element #3141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0d83c1b
feat(tooltip): add pf-v6-tooltip element
bennypowers May 11, 2026
2bd0449
feat(tooltip): delete pf-v5-tooltip
bennypowers May 12, 2026
683110f
fix: update v5 tooltip importers to use pf-v6-tooltip
bennypowers May 12, 2026
a605582
fix: update remaining pf-v5-tooltip references in docs and CSS
bennypowers May 12, 2026
e45abd5
feat(tooltip): add `visible` boolean
bennypowers May 14, 2026
75be1fb
docs(tooltip): add README.md
bennypowers May 14, 2026
6872409
Merge remote-tracking branch 'origin/staging/pfv6' into feat/tooltip/v6
bennypowers May 25, 2026
b223386
fix(tooltip): a11y and API improvements
bennypowers May 26, 2026
67c1fc5
test(tooltip): add missing test coverage
bennypowers May 26, 2026
4e7404e
feat(tooltip): add click and manual trigger demos
bennypowers May 26, 2026
ac2b177
chore(tooltip): remove redundant left-aligned demo
bennypowers May 26, 2026
30dce1f
docs: update ADVICE.md with announcer and cross-root ARIA guidance
bennypowers May 26, 2026
b52089b
chore(tooltip): add changeset
bennypowers May 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/keen-newts-fly.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@patternfly/elements": minor
---

`pf-v6-tooltip`: New tooltip element with hover/focus activation, configurable placement, entry/exit delays, flip behavior, external trigger support, rich content via slot, and cancelable show/hide events.

@zeroedin zeroedin Jun 12, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be a major and follow the major changeset format

---
"@patternfly/elements": major
---

✨ Added `<pf-v6-tooltip>` replacing `<pf-v5-tooltip>`. Tooltip now follows
PatternFly v6 design specs.

{{ example usage here }}

** Breaking Changes from v5 **

- {{Breaking changes here}}

7 changes: 6 additions & 1 deletion .claude/ADVICE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -641,8 +641,13 @@ Icons are decorative or informational, not interactive. Click handlers belong on

> "You must not add click listeners to icons." (PFE PR #2951)

### Use a static live-region announcer for tooltip/popover content
Tooltip and popover content lives in shadow DOM, which prevents `aria-describedby` from working cross-root. Use a shared static `role="status"` announcer element (visually hidden, appended to `document.body`) to announce content to screen readers. Announce on show, clear on hide. Provide a `silent` boolean attribute to opt out when authors provide their own accessible label.

> Pattern established in `rh-tooltip` (RHDS): static `initAnnouncer()` + `announce(text)` in `show()`, clear in `hide()`. Adopted in `pf-v6-tooltip` (PFE).

### Consider cross-root ARIA limitations
When composing elements across shadow boundaries, cross-root ARIA references don't work declaratively yet. This may require duplicating internal elements as a workaround. Client-side, ARIA IDL DOM properties (baseline 2025) can resolve cross-root references imperatively via JavaScript. Upcoming APIs like Reference Target will provide declarative solutions.
When composing elements across shadow boundaries, cross-root ARIA references don't work declaratively yet. `ariaDescribedByElements` and similar IDL properties silently fail for light-to-shadow references. The [WPT test](https://github.com/web-platform-tests/wpt/blob/master/custom-elements/element-internals-aria-element-reflection.html) explicitly asserts cross-root refs produce an empty computed label. See also [WICG/aom#192](https://github.com/WICG/aom/issues/192) and [whatwg/html#5401](https://github.com/whatwg/html/issues/5401). Upcoming APIs like Reference Target ([WICG/webcomponents#1086](https://github.com/WICG/webcomponents/issues/1086)) will provide solutions. Keep cross-root IDL assignments as progressive enhancement.

> "We can't use pf-button until browser vendors ship a solution for x-root aria." (PFE PR #2676)

Expand Down
6 changes: 3 additions & 3 deletions docs/framework-integration/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ tags:
import { Card } from "@patternfly/elements/react/pf-v5-card/pf-v5-card.js";
import { Switch } from "@patternfly/elements/react/pf-v5-switch/pf-v5-switch.js";
import { Popover } from "@patternfly/elements/react/pf-v5-popover/pf-v5-popover.js";
import { Tooltip } from "@patternfly/elements/react/pf-v5-tooltip/pf-v5-tooltip.js";
import { Tooltip } from "@patternfly/elements/react/pf-v6-tooltip/pf-v6-tooltip.js";

import "./App.css";
```
Expand Down Expand Up @@ -208,7 +208,7 @@ tags:
### Tooltip

Now we have a card, button, and switch component, let's add
[`pf-v5-tooltip`][pf-v5-tooltip] web component in our app. We will show the tooltip
[`pf-v6-tooltip`][pf-v6-tooltip] web component in our app. We will show the tooltip
text on mouseover.

```js
Expand Down Expand Up @@ -356,7 +356,7 @@ tags:
[pf-v5-button]: https://patternflyelements.org/components/button/
[pf-v5-card]: https://patternflyelements.org/components/card/
[pf-v5-switch]: https://patternflyelements.org/components/switch/
[pf-v5-tooltip]: https://patternflyelements.org/components/tooltip/
[pf-v6-tooltip]: https://patternflyelements.org/components/tooltip/
[pf-v5-popover]: https://patternflyelements.org/components/popover/
[inng]: https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-angular-app-4b18b1c9c363
[invue]: https://patternflyelements.org/framework-integration/vue/
6 changes: 3 additions & 3 deletions elements/pf-v5-chip/demo/long-chip-with-tooltip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<pf-v5-tooltip>
<pf-v6-tooltip>
<pf-v5-chip id="longchip">Really long chip that goes on and on</pf-v5-chip>
<span slot="content">Really long chip that goes on and on</span>
</pf-v5-tooltip>
</pf-v6-tooltip>

<style>
#longchip::part(text) {
Expand All @@ -16,6 +16,6 @@

<script type="module">
import '@patternfly/elements/pf-v5-chip/pf-v5-chip.js';
import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
import '@patternfly/elements/pf-v6-tooltip/pf-v6-tooltip.js';
</script>

6 changes: 3 additions & 3 deletions elements/pf-v5-chip/docs/pf-v5-chip.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script type="module">
import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
import '@patternfly/elements/pf-v5-badge/pf-v5-badge.js';
import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
import '@patternfly/elements/pf-v6-tooltip/pf-v6-tooltip.js';
</script>

{% renderOverview %}
Expand Down Expand Up @@ -36,12 +36,12 @@ Chips can be removable or read-only. The Overflow chip is a special chip that is
#### Max-width

{% htmlexample %}
<pf-v5-tooltip id="max"
<pf-v6-tooltip id="max"
position="top">
<pf-v5-chip onclick="this.parentElement.remove()"
style="max-width:10em;">Really long chip that goes on and on</pf-v5-chip>
<span slot="content">Really long chip that goes on and on</span>
</pf-v5-tooltip>
</pf-v6-tooltip>
{% endhtmlexample %}

### Chip group
Expand Down
6 changes: 3 additions & 3 deletions elements/pf-v5-clipboard-copy/pf-v5-clipboard-copy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import formControlStyles from '../form-control.css';

import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
import '@patternfly/elements/pf-v6-tooltip/pf-v6-tooltip.js';

const sleep = (ms?: number) => new Promise(r => setTimeout(r, ms));

Expand Down Expand Up @@ -112,7 +112,7 @@ export class PfV5ClipboardCopy extends LitElement {
?disabled="${expanded || readonly}"
.value="${this.value}"
@input="${this.#onChange}">
<pf-v5-tooltip>
<pf-v6-tooltip>
<pf-v5-button id="copy-button"
icon="copy"
?plain="${inline || compact}"
Expand All @@ -121,7 +121,7 @@ export class PfV5ClipboardCopy extends LitElement {
@click="${this.copy}">
</pf-v5-button>
<span slot="content">${this.#copied ? this.clickTip : this.hoverTip}</span>
</pf-v5-tooltip>
</pf-v6-tooltip>
<!-- Place additional action buttons here -->
<slot name="actions"></slot>
</div>
Expand Down
2 changes: 1 addition & 1 deletion elements/pf-v5-icon/demo/sets.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ <h1>Default Icon Sets</h1>

<script type="module">
import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
import '@patternfly/elements/pf-v6-tooltip/pf-v6-tooltip.js';

import { render, html } from 'lit';
import { repeat } from 'lit/directives/repeat.js';
Expand Down
2 changes: 1 addition & 1 deletion elements/pf-v5-progress/pf-v5-progress.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,6 @@ progress[value]::-webkit-progress-value {
);
}

pf-v5-tooltip {
pf-v6-tooltip {
height: 0.01px;
}
6 changes: 3 additions & 3 deletions elements/pf-v5-progress/pf-v5-progress.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export class PfV5Progress extends LitElement {
import('@patternfly/elements/pf-v5-icon/pf-v5-icon.js');
}
if (this.descriptionTruncated) {
import('@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js');
import('@patternfly/elements/pf-v6-tooltip/pf-v6-tooltip.js');
}
}

Expand All @@ -97,8 +97,8 @@ export class PfV5Progress extends LitElement {
<div id="description" aria-hidden="true">${description ?? ''}</div>

${!descriptionTruncated ? '' : html`
<pf-v5-tooltip content="${this.description ?? ''}"
trigger="description"></pf-v5-tooltip>
<pf-v6-tooltip content="${this.description ?? ''}"
trigger="description"></pf-v6-tooltip>
`}

${measureLocation === 'none' ? '' : html`
Expand Down
10 changes: 5 additions & 5 deletions elements/pf-v5-timestamp/demo/custom-tooltip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
<section>
<p>
<pf-v5-tooltip>
<pf-v6-tooltip>
<pf-v5-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)"></pf-v5-timestamp>
<span slot="content">Last updated on <pf-v5-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" date-format="long" time-format="short" utc></pf-v5-timestamp></span>
</pf-v5-tooltip>
</pf-v6-tooltip>
</p>
<p>
<pf-v5-tooltip>
<pf-v6-tooltip>
Halloween
<pf-v5-timestamp slot="content" date="Mon Oct 31 2022 00:00:00 GMT-0400 (Eastern Daylight Time)" date-format="medium"></pf-v5-timestamp>
</pf-v5-tooltip>
</pf-v6-tooltip>
</p>
</section>

<script type="module">
import '@patternfly/elements/pf-v5-timestamp/pf-v5-timestamp.js';
import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
import '@patternfly/elements/pf-v6-tooltip/pf-v6-tooltip.js';
</script>

<style>
Expand Down
10 changes: 5 additions & 5 deletions elements/pf-v5-timestamp/demo/relative-format-with-tooltip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
<section>
<p>
<pf-v5-tooltip>
<pf-v6-tooltip>
<pf-v5-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v5-timestamp>
<pf-v5-timestamp slot="content" date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)"></pf-v5-timestamp>
</pf-v5-tooltip>
</pf-v6-tooltip>
</p>
<p>
<pf-v5-tooltip>
<pf-v6-tooltip>
<pf-v5-timestamp date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v5-timestamp>
<pf-v5-timestamp slot="content" date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)"></pf-v5-timestamp>
</pf-v5-tooltip>
</pf-v6-tooltip>
</p>
</section>

<script type="module">
import '@patternfly/elements/pf-v5-timestamp/pf-v5-timestamp.js';
import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
import '@patternfly/elements/pf-v6-tooltip/pf-v6-tooltip.js';
</script>

<style>
Expand Down
10 changes: 5 additions & 5 deletions elements/pf-v5-timestamp/demo/tooltip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
<section>
<p>
<pf-v5-tooltip>
<pf-v6-tooltip>
<pf-v5-timestamp></pf-v5-timestamp>
<pf-v5-timestamp slot="content" utc></pf-v5-timestamp>
</pf-v5-tooltip>
</pf-v6-tooltip>
</p>
<p>
<pf-v5-tooltip>
<pf-v6-tooltip>
<pf-v5-timestamp></pf-v5-timestamp>
<pf-v5-timestamp slot="content" utc display-suffix="Coordinated Universal Time"></pf-v5-timestamp>
</pf-v5-tooltip>
</pf-v6-tooltip>
</p>
</section>

<script type="module">
import '@patternfly/elements/pf-v5-timestamp/pf-v5-timestamp.js';
import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
import '@patternfly/elements/pf-v6-tooltip/pf-v6-tooltip.js';
</script>

<style>
Expand Down
18 changes: 9 additions & 9 deletions elements/pf-v5-timestamp/docs/pf-v5-timestamp.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,20 +61,20 @@
{% endhtmlexample %}

### Adding a tooltip
To add a tooltip that displays the timestamp content as a UTC time, you can wrap `pf-v5-timestamp` with `pf-v5-tooltip` and set the `utc` attribute on an additional `pf-v5-timestamp`.
To add a tooltip that displays the timestamp content as a UTC time, you can wrap `pf-v5-timestamp` with `pf-v6-tooltip` and set the `utc` attribute on an additional `pf-v5-timestamp`.

{% htmlexample %}
<pf-v5-tooltip>
<pf-v6-tooltip>
<pf-v5-timestamp></pf-v5-timestamp>
<pf-v5-timestamp slot="content" utc></pf-v5-timestamp>
</pf-v5-tooltip>
</pf-v6-tooltip>
{% endhtmlexample %}

{% htmlexample %}
<pf-v5-tooltip>
<pf-v6-tooltip>
<pf-v5-timestamp></pf-v5-timestamp>
<pf-v5-timestamp slot="content" utc display-suffix="Coordinated Universal Time"></pf-v5-timestamp>
</pf-v5-tooltip>
</pf-v6-tooltip>
{% endhtmlexample %}

### Relative time
Expand All @@ -92,17 +92,17 @@
To display relative time, set the `relative` attribute on `pf-v5-timestamp`.

{% htmlexample %}
<pf-v5-tooltip>
<pf-v6-tooltip>
<pf-v5-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v5-timestamp>
<pf-v5-timestamp slot="content" date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)"></pf-v5-timestamp>
</pf-v5-tooltip>
</pf-v6-tooltip>
{% endhtmlexample %}

{% htmlexample %}
<pf-v5-tooltip>
<pf-v6-tooltip>
<pf-v5-timestamp date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-v5-timestamp>
<pf-v5-timestamp slot="content" date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)"></pf-v5-timestamp>
</pf-v5-tooltip>
</pf-v6-tooltip>
{% endhtmlexample %}

### Set a locale to something other than the default locale
Expand Down
64 changes: 0 additions & 64 deletions elements/pf-v5-tooltip/README.md
View file
Open in desktop

This file was deleted.

Loading
Loading