From 192f167c1715c0b90a61d24984ed41dc9da9fb2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20Gr=C3=BCndel?= Date: Fri, 23 Oct 2026 03:52:36 +0200 Subject: [PATCH] Fix tooltip ellipsis across style packs (#205) Co-authored-by: grugbraindev <178141691+grugbraindev@users.noreply.github.com> --- CHANGELOG.md | 1 + site/src/docs/components/tooltip.mdx | 8 ++++++++ src/css/components/tooltip.css | 2 +- src/css/styles/luma.css | 2 +- src/css/styles/lyra.css | 2 +- src/css/styles/maia.css | 2 +- src/css/styles/mira.css | 2 +- src/css/styles/nova.css | 2 +- src/css/styles/rhea.css | 2 +- src/css/styles/sera.css | 2 +- src/css/styles/vega.css | 2 +- 11 files changed, 18 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9611b81..3ceea18 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ ### Fixed - Prevented Escape from dismissing an enclosing dialog while closing an open Combobox popup. +- Fixed long Tooltip text clipping instead of showing an ellipsis across all style packs. ## [1.0.2] - 2026-07-06 diff --git a/site/src/docs/components/tooltip.mdx b/site/src/docs/components/tooltip.mdx index 17f1ef8..4359275 100644 --- a/site/src/docs/components/tooltip.mdx +++ b/site/src/docs/components/tooltip.mdx @@ -53,6 +53,14 @@ Basecoat tooltips are CSS-only and text-only. This intentionally differs from sh +### Long text + +Tooltips stay on one line and truncate with an ellipsis when the text exceeds the maximum width. This intentionally differs from shadcn/ui's multiline tooltip content. + + + + + ### Sides diff --git a/src/css/components/tooltip.css b/src/css/components/tooltip.css index c07341c..ee54ac6 100644 --- a/src/css/components/tooltip.css +++ b/src/css/components/tooltip.css @@ -4,7 +4,7 @@ @apply relative; &:before { - @apply absolute z-[60] w-fit max-w-xs origin-(--transform-origin) scale-95 truncate invisible opacity-0 transition-all pointer-events-none content-[attr(data-tooltip)]; + @apply absolute block z-[60] w-fit max-w-xs origin-(--transform-origin) scale-95 truncate invisible opacity-0 transition-all pointer-events-none content-[attr(data-tooltip)]; } &:hover:before { diff --git a/src/css/styles/luma.css b/src/css/styles/luma.css index b40dab9..a96fb2e 100644 --- a/src/css/styles/luma.css +++ b/src/css/styles/luma.css @@ -1324,7 +1324,7 @@ /* Tooltip */ [data-tooltip]::before { - @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-lg; + @apply bg-foreground text-background rounded-xl px-3 py-1.5 text-xs; } [data-tooltip][data-arrow]::after { diff --git a/src/css/styles/lyra.css b/src/css/styles/lyra.css index 87edda1..7c583c8 100644 --- a/src/css/styles/lyra.css +++ b/src/css/styles/lyra.css @@ -1327,7 +1327,7 @@ /* Tooltip */ [data-tooltip]::before { - @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-none px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-none; + @apply bg-foreground text-background rounded-none px-3 py-1.5 text-xs; } [data-tooltip][data-arrow]::after { diff --git a/src/css/styles/maia.css b/src/css/styles/maia.css index 9aeb95a..4122462 100644 --- a/src/css/styles/maia.css +++ b/src/css/styles/maia.css @@ -1312,7 +1312,7 @@ /* Tooltip */ [data-tooltip]::before { - @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-2xl px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-4xl; + @apply bg-foreground text-background rounded-2xl px-3 py-1.5 text-xs; } [data-tooltip][data-arrow]::after { diff --git a/src/css/styles/mira.css b/src/css/styles/mira.css index 8af2956..556d648 100644 --- a/src/css/styles/mira.css +++ b/src/css/styles/mira.css @@ -1321,7 +1321,7 @@ /* Tooltip */ [data-tooltip]::before { - @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-sm; + @apply bg-foreground text-background rounded-md px-3 py-1.5 text-xs; } [data-tooltip][data-arrow]::after { diff --git a/src/css/styles/nova.css b/src/css/styles/nova.css index cc2eb33..74d8a27 100644 --- a/src/css/styles/nova.css +++ b/src/css/styles/nova.css @@ -1335,7 +1335,7 @@ /* Tooltip */ [data-tooltip]::before { - @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-sm; + @apply bg-foreground text-background rounded-md px-3 py-1.5 text-xs; } [data-tooltip][data-arrow]::after { diff --git a/src/css/styles/rhea.css b/src/css/styles/rhea.css index 66a55d9..e83b7d1 100644 --- a/src/css/styles/rhea.css +++ b/src/css/styles/rhea.css @@ -1329,7 +1329,7 @@ /* Tooltip */ [data-tooltip]::before { - @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-lg; + @apply bg-foreground text-background rounded-xl px-3 py-1.5 text-xs; } [data-tooltip][data-arrow]::after { diff --git a/src/css/styles/sera.css b/src/css/styles/sera.css index 2200961..dc04e2f 100644 --- a/src/css/styles/sera.css +++ b/src/css/styles/sera.css @@ -1345,7 +1345,7 @@ /* Tooltip */ [data-tooltip]::before { - @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-none px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-none; + @apply bg-foreground text-background rounded-none px-3 py-1.5 text-xs; } [data-tooltip][data-arrow]::after { diff --git a/src/css/styles/vega.css b/src/css/styles/vega.css index 6c16e71..63f2630 100644 --- a/src/css/styles/vega.css +++ b/src/css/styles/vega.css @@ -1334,7 +1334,7 @@ /* Tooltip */ [data-tooltip]::before { - @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-sm; + @apply bg-foreground text-background rounded-md px-3 py-1.5 text-xs; } [data-tooltip][data-arrow]::after {