|
| 1 | +# Tooltip |
| 2 | + |
| 3 | +`<pf-v6-tooltip>` - in-app messaging used to identify elements with short, |
| 4 | +clarifying text. Shows on hover or focus. |
| 5 | + |
| 6 | +## Usage |
| 7 | + |
| 8 | +```html |
| 9 | +<pf-v6-tooltip content="Copy to clipboard"> |
| 10 | + <button>Copy</button> |
| 11 | +</pf-v6-tooltip> |
| 12 | +``` |
| 13 | + |
| 14 | +Rich content via slot: |
| 15 | + |
| 16 | +```html |
| 17 | +<pf-v6-tooltip> |
| 18 | + <button>Info</button> |
| 19 | + <span slot="content">Tooltip with <strong>rich</strong> content</span> |
| 20 | +</pf-v6-tooltip> |
| 21 | +``` |
| 22 | + |
| 23 | +External trigger: |
| 24 | + |
| 25 | +```html |
| 26 | +<button id="my-btn">Hover me</button> |
| 27 | +<pf-v6-tooltip trigger="my-btn" content="Hello"></pf-v6-tooltip> |
| 28 | +``` |
| 29 | + |
| 30 | +## Divergences from React `Tooltip` |
| 31 | + |
| 32 | +### Not implemented |
| 33 | + |
| 34 | +| React prop | Notes | |
| 35 | +| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | |
| 36 | +| `appendTo` | Web component renders in its own shadow DOM; no portal needed | |
| 37 | +| `aria` | Always uses `aria-describedby` via `ariaDescribedByElements`. No `labelledby` or `none` option | |
| 38 | +| `aria-live` | Not implemented | |
| 39 | + |
| 40 | +### Changed API |
| 41 | + |
| 42 | +| React prop | Web component | Difference | |
| 43 | +| -------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 44 | +| `trigger` (event types) | Cancelable `show`/`hide` events | React accepts `'mouseenter focus'`, `'click'`, `'manual'`. Web component always triggers on mouseenter + focusin; cancel events to emulate others | |
| 45 | +| `content` (required prop) | `content` attribute or `content` slot | Attribute is optional when slot is used | |
| 46 | +| `enableFlip` | `no-flip` | Inverted boolean; flip enabled by default | |
| 47 | +| `flipBehavior` | `flip-behavior` | Attribute accepts comma-separated list instead of array | |
| 48 | +| `isContentLeftAligned` | `alignment` | Accepts `'start'`, `'end'`, `'left'`, `'right'` instead of boolean | |
| 49 | +| `maxWidth` | `--pf-v6-c-tooltip--MaxWidth` | CSS custom property instead of prop | |
| 50 | +| `children` / `triggerRef` | default slot or `trigger` attribute | Trigger is slotted child or ID string/Element reference | |
| 51 | +| `onTooltipHidden` | `hide` event | Cancelable DOM event with `reason` field. Also fires `show` event (no React equivalent) | |
| 52 | +| `animationDuration` | CSS transitions | Override via stylesheet instead of prop | |
| 53 | +| `distance` | Hardcoded 15px | Not configurable; React default also 15 | |
| 54 | +| `isVisible` | `visible` | Boolean attribute; also controllable via `.show()` / `.hide()` methods | |
| 55 | +| `minWidth` | Not supported | No CSS custom property exposed | |
| 56 | +| `zIndex` | Not supported | Hardcoded to 10000 in shadow DOM | |
| 57 | +| `className` | CSS custom properties / `::part()` | Standard web component styling mechanisms | |
| 58 | + |
| 59 | +### Added |
| 60 | + |
| 61 | +| Web component API | Notes | |
| 62 | +| ----------------------------- | ------------------------------------------------------------------- | |
| 63 | +| `show` event | Cancelable event before tooltip shows, with trigger `reason` | |
| 64 | +| `hide` event | Cancelable event before tooltip hides, with trigger `reason` | |
| 65 | +| `.show()` / `.hide()` methods | Programmatic visibility control | |
| 66 | +| `content` slot | Rich HTML content, not available in React (which takes `ReactNode`) | |
| 67 | +| CSS custom properties | 13 custom properties for fine-grained style control without JS | |
| 68 | + |
0 commit comments