mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 21:58:17 +00:00
Stefan Gründelandgrugbraindev
192f167c17
Co-authored-by: grugbraindev <178141691+grugbraindev@users.noreply.github.com>
101 lines
3.4 KiB
Plaintext
101 lines
3.4 KiB
Plaintext
# Tooltip
|
|
|
|
<Preview>
|
|
<button class="btn" data-variant="outline" data-tooltip="Add to library">Hover</button>
|
|
</Preview>
|
|
|
|
## Usage
|
|
|
|
<Steps>
|
|
<Step title="Include CSS">
|
|
|
|
Import Tailwind and one full Basecoat style bundle.
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
@import "basecoat-css/vega.css";
|
|
```
|
|
|
|
Or import only the base CSS, Tooltip component CSS, and one style pack.
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
@import "basecoat-css/base.css";
|
|
@import "basecoat-css/components/tooltip.css";
|
|
@import "basecoat-css/styles/vega.css";
|
|
```
|
|
|
|
Using CDN or bundler imports? See the [Installation page](/installation).
|
|
|
|
</Step>
|
|
<Step title="Add your tooltip HTML">
|
|
|
|
Add `data-tooltip` to the trigger element. Use `data-side` and `data-align` to change the position:
|
|
|
|
- `data-tooltip`: Tooltip text.
|
|
- `data-side` `Optional`: `top`, `bottom`, `left`, `right`, `inline-start`, or `inline-end`. Defaults to `top`.
|
|
- `data-align` `Optional`: `start`, `center`, or `end`. Defaults to `center`.
|
|
|
|
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" data-variant="outline" data-tooltip="Tooltip text" data-side="bottom" data-align="center">Bottom</button>
|
|
```
|
|
|
|
</Step>
|
|
</Steps>
|
|
|
|
## Examples
|
|
|
|
### Default
|
|
|
|
<Preview>
|
|
<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>
|
|
<div class="flex flex-wrap gap-2">
|
|
<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" 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>
|
|
|
|
### Disabled button
|
|
|
|
<Preview>
|
|
<span class="inline-block" data-tooltip="This feature is currently unavailable"> <button class="btn" data-variant="outline" disabled>Disabled</button></span>
|
|
</Preview>
|
|
|
|
### Link
|
|
|
|
<Preview>
|
|
<a href="#" class="text-primary text-sm underline-offset-4 hover:underline" data-tooltip="Click to read the documentation">Learn more</a>
|
|
</Preview>
|
|
|
|
### RTL
|
|
|
|
<Preview>
|
|
<div dir="rtl" class="flex gap-2">
|
|
<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>
|