Merge pull request #3141 from patternfly/feat/tooltip/v6

feat(tooltip)!: port to `pf-v6-tooltip`

Author: zeroedin

.changeset/keen-newts-fly.md

@@ -0,0 +1,26 @@
+---
+"@patternfly/elements": major
+---
+
+Added `<pf-v6-tooltip>` replacing `<pf-v5-tooltip>`. Tooltip now follows
+PatternFly v6 design specs.
+
+```html
+<pf-v6-tooltip content="Copy to clipboard">
+  <button>Copy</button>
+</pf-v6-tooltip>
+```
+
+**Breaking changes from v5:**
+
+- Tag name changed from `pf-v5-tooltip` to `pf-v6-tooltip`
+- `visible` attribute replaces programmatic-only visibility
+- `entry-delay` and `exit-delay` attributes added (300ms default)
+- `alignment` attribute replaces `isContentLeftAligned` (accepts `start`/`end`)
+- `no-flip` inverted boolean replaces `enableFlip`
+- `content` slot added for rich HTML content
+- Cancelable `show`/`hide` events with `reason` property
+- `silent` attribute for suppressing screen reader announcements
+- CSS custom properties replace inline style props (`maxWidth`, etc.)
+
+Users who need the react component's `trigger` prop are advised to use `<pf-v6-popover>` instead, or to use the cancellable `show`/`hide` events to prevent default behaviour.

.claude/ADVICE.md

@@ -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)
 

.github/workflows/tests.yml

@@ -97,8 +97,13 @@ jobs:
   ssr:
     name: SSR Tests (Playwright)
     runs-on: ubuntu-latest
+    # --ipc=host gives Chromium the host's shared memory namespace.
+    # Without it, fullPage screenshots can hang when the compositor
+    # exhausts Docker's default 64 MB /dev/shm.
+    # https://playwright.dev/docs/docker#shared-memory-size
     container:
       image: mcr.microsoft.com/playwright:v1.57.0-noble
+      options: --ipc=host
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4

docs/framework-integration/react.md

@@ -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-v6-switch/pf-v6-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";
   ```
@@ -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
@@ -356,7 +356,7 @@ tags:
 [pf-v5-button]: https://patternflyelements.org/components/button/
 [pf-v5-card]: https://patternflyelements.org/components/card/
 [pf-v6-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/

elements/pf-v5-chip/demo/long-chip-with-tooltip.html

@@ -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) {
@@ -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>
 

elements/pf-v5-chip/docs/pf-v5-chip.md

@@ -1,7 +1,7 @@
 <script type="module">
 import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
 import '@patternfly/elements/pf-v6-badge/pf-v6-badge.js';
-import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
+import '@patternfly/elements/pf-v6-tooltip/pf-v6-tooltip.js';
 </script>
 
 {% renderOverview %}
@@ -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

elements/pf-v5-clipboard-copy/pf-v5-clipboard-copy.ts

@@ -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));
 
@@ -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}"
@@ -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>

elements/pf-v5-icon/demo/sets.html

@@ -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';