Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-17 23:54:28 +01:00
Code Activity

Migrate ha-tooltip to webawesome (#26540)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Simon Lamon
2025-09-12 13:09:24 +02:00
committed by GitHub
parent 0d8d18617c
commit dcbc8b627f
34 changed files with 451 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
gallery/src/pages/components/ha-tooltip.markdown
View File

@@ -6,21 +6,23 @@ A tooltip's target is its _first child element_, so you should only wrap one ele
Tooltips use `display: contents` so they won't interfere with how elements are positioned in a flex or grid layout.
<ha-tooltip content="This is a tooltip">
<ha-button>Hover Me</ha-button>
<ha-button id="hover">Hover Me</ha-button>
<ha-tooltip for="hover">
This is a tooltip
</ha-tooltip>
```
<ha-tooltip content="This is a tooltip">
<ha-button>Hover Me</ha-button>
<ha-button id="hover">Hover Me</ha-button>
<ha-tooltip for="hover">
This is a tooltip
</ha-tooltip>
```
## Documentation
This element is based on shoelace `sl-tooltip` it only sets some css tokens and has a custom show/hide animation.
This element is based on webawesome `wa-tooltip` it only sets some css tokens and has a custom show/hide animation.
<a href="https://shoelace.style/components/tooltip" target="_blank" rel="noopener noreferrer">Shoelace documentation</a>
<a href="https://webawesome.com/docs/components/tooltip/" target="_blank" rel="noopener noreferrer">Webawesome documentation</a>
### HA style tokens
@@ -28,7 +30,7 @@ In your theme settings use this without the prefixed `--`.
- `--ha-tooltip-border-radius` (Default: 4px)
- `--ha-tooltip-arrow-size` (Default: 8px)
- `--sl-tooltip-font-family` (Default: `var(--ha-font-family-body)`)
- `--wa-tooltip-font-family` (Default: `var(--ha-font-family-body)`)
- `--ha-tooltip-font-size` (Default: `var(--ha-font-size-s)`)
- `--sl-tooltip-font-weight` (Default: `var(--ha-font-weight-normal)`)
- `--sl-tooltip-line-height` (Default: `var(--ha-line-height-condensed)`)
- `--wa-tooltip-font-weight` (Default: `var(--ha-font-weight-normal)`)
- `--wa-tooltip-line-height` (Default: `var(--ha-line-height-condensed)`)