hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-11 04:38:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix tooltip ellipsis across style packs (#205)

Browse Source 
Co-authored-by: grugbraindev <178141691+grugbraindev@users.noreply.github.com>
This commit is contained in:
Stefan Gründel
2026-10-23 09:52:36 +08:00
committed by GitHub
co-authored by grugbraindev
parent 64d219fdc6
commit 192f167c17
11 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -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
site/src/docs/components/tooltip.mdx
+8
View File
@@ -53,6 +53,14 @@ Basecoat tooltips are CSS-only and text-only. This intentionally differs from sh
<button class="btn" data-variant="outline" data-tooltip="Default tooltip">Default</button>
</Preview>
### 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.
<Preview>
<button class="btn" data-variant="outline" data-tooltip="A tooltip with enough text to exceed the default maximum width and demonstrate truncation">Hover</button>
</Preview>
### Sides
<Preview>
src/css/components/tooltip.css
+1 -1
View File
@@ -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 {
src/css/styles/luma.css
+1 -1
View File
@@ -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 {
src/css/styles/lyra.css
+1 -1
View File
@@ -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 {
src/css/styles/maia.css
+1 -1
View File
@@ -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 {
src/css/styles/mira.css
+1 -1
View File
@@ -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 {
src/css/styles/nova.css
+1 -1
View File
@@ -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 {
src/css/styles/rhea.css
+1 -1
View File
@@ -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 {
src/css/styles/sera.css
+1 -1
View File
@@ -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 {
src/css/styles/vega.css
+1 -1
View File
@@ -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 {