mirror of
https://github.com/bitwarden/browser
synced 2026-02-07 04:03:29 +00:00
5b815c4ae4
* Add tooltip to icon button to display label * remove legacy cdr variable * create overlay on focus or hover * attach describdedby ids * fix type errors * remove aria-describedby when not necessary * fix failing tests * implement Claude feedback * fixing broken specs * remove host attr binding * Simplify directive aria logic * Move id to statis number * do not render empty tooltip * pass id to tooltip component * remove pointer-events none to allow tooltip on normal buttons * exclude some tooltip stories * change describedby input name * add story with tooltip on regular button * enhanced tooltip docs * set model directly * change model to input
49 lines
1.2 KiB
Plaintext
49 lines
1.2 KiB
Plaintext
import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./tooltip.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
```ts
|
|
import { TooltipDirective } from "@bitwarden/components";
|
|
```
|
|
|
|
<Title />
|
|
<Description />
|
|
|
|
### Tooltip usage
|
|
|
|
The `TooltipComponent` can't be used on its own. It must be applied via the `TooltipDirective`.
|
|
|
|
The `IconButtonComponent` will automatically apply a tooltip based on the component's `label` input.
|
|
|
|
#### Adding the tooltip to the host element's `aria-describedby` list
|
|
|
|
The `addTooltipToDescribedby="true"` model input can be used to add the tooltip id to the list of
|
|
the host element's `aria-describedby` element IDs.
|
|
|
|
NOTE: This behavior is not always necessary and could be redundant if the host element's aria
|
|
attributes already convey the same message as the tooltip. Use only when the tooltip is extra,
|
|
non-essential contextual information.
|
|
|
|
<Primary />
|
|
<Controls />
|
|
|
|
## Stories
|
|
|
|
### All available positions
|
|
|
|
<Canvas of={stories.AllPositions} />
|
|
|
|
### Used with a long content
|
|
|
|
<Canvas of={stories.LongContent} />
|
|
|
|
### On disabled element
|
|
|
|
<Canvas of={stories.OnDisabledButton} />
|
|
|
|
### On a Button
|
|
|
|
<Canvas of={stories.OnNonIconButton} />
|