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

Prepare 1.0.0-beta.3

Browse Source
This commit is contained in:
Ronan Berder
2026-06-20 13:58:42 +08:00
parent 0ae97ae627
commit 971b2e171b
100 changed files with 4755 additions and 4287 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/components/tooltip.mdx
+11 -11
View File
@@ -1,7 +1,7 @@
# Tooltip
<Preview>
<button class="btn-outline" data-tooltip="Add to library">Hover</button>
<button class="btn" data-variant="outline" data-tooltip="Add to library">Hover</button>
</Preview>
## Usage
@@ -15,7 +15,7 @@ Add `data-tooltip` to the trigger element. Use `data-side` and `data-align` to c
Basecoat tooltips are CSS-only and text-only. This intentionally differs from shadcn/ui's composed tooltip content, which can render arbitrary markup and uses a portal.
```html
<button class="btn-outline" data-tooltip="Tooltip text" data-side="bottom" data-align="center">Bottom</button>
<button class="btn" data-variant="outline" data-tooltip="Tooltip text" data-side="bottom" data-align="center">Bottom</button>
```
## Examples
@@ -23,24 +23,24 @@ Basecoat tooltips are CSS-only and text-only. This intentionally differs from sh
### Default
<Preview>
<button class="btn-outline" data-tooltip="Default tooltip">Default</button>
<button class="btn" data-variant="outline" data-tooltip="Default tooltip">Default</button>
</Preview>
### Sides
<Preview>
<div class="flex flex-wrap gap-2">
<button class="btn-outline" data-tooltip="Tooltip" data-side="inline-start">Inline Start</button>
<button class="btn-outline" data-tooltip="Tooltip" data-side="top">Top</button>
<button class="btn-outline" data-tooltip="Tooltip" data-side="bottom">Bottom</button>
<button class="btn-outline" data-tooltip="Tooltip" data-side="inline-end">Inline End</button>
<button class="btn" data-variant="outline" data-tooltip="Tooltip" data-side="inline-start">Inline Start</button>
<button class="btn" data-variant="outline" data-tooltip="Tooltip" data-side="top">Top</button>
<button class="btn" data-variant="outline" data-tooltip="Tooltip" data-side="bottom">Bottom</button>
<button class="btn" data-variant="outline" data-tooltip="Tooltip" data-side="inline-end">Inline End</button>
</div>
</Preview>
### Icon Button
<Preview>
<button class="btn-icon-ghost" data-tooltip="Additional information" aria-label="Info">
<button class="btn" data-variant="ghost" data-size="icon" data-tooltip="Additional information" aria-label="Info">
<svg class="lucide lucide-info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></svg>
</button>
</Preview>
@@ -49,7 +49,7 @@ Basecoat tooltips are CSS-only and text-only. This intentionally differs from sh
<Preview>
<span class="inline-block" data-tooltip="This feature is currently unavailable">
<button class="btn-outline" disabled>Disabled</button>
<button class="btn" data-variant="outline" disabled>Disabled</button>
</span>
</Preview>
@@ -63,7 +63,7 @@ Basecoat tooltips are CSS-only and text-only. This intentionally differs from sh
<Preview>
<div dir="rtl" class="flex gap-2">
<button class="btn-outline" data-tooltip="تلميح" data-side="inline-start">Inline Start</button>
<button class="btn-outline" data-tooltip="تلميح" data-side="inline-end">Inline End</button>
<button class="btn" data-variant="outline" data-tooltip="تلميح" data-side="inline-start">Inline Start</button>
<button class="btn" data-variant="outline" data-tooltip="تلميح" data-side="inline-end">Inline End</button>
</div>
</Preview>