Rewrote all the docs - more noob friendly now.
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
+38
-47
@@ -1,48 +1,24 @@
|
||||
# Tooltip
|
||||
|
||||
A text hint that appears on hover. Implemented entirely in CSS using Tailwind's `group` and `group-hover` utilities — no JavaScript required.
|
||||
A small text hint that appears when the user hovers over an element. Use it to label icon buttons, clarify abbreviations, or explain options that don't have visible text.
|
||||
|
||||
Tooltips are implemented entirely in CSS — no JavaScript required.
|
||||
|
||||
---
|
||||
|
||||
## HTML structure
|
||||
## Quick example
|
||||
|
||||
```
|
||||
span.relative.inline-flex.items-center.group
|
||||
{trigger component rendered inline}
|
||||
span.tooltip-text.absolute.z-50.px-2.py-1.text-xs.rounded.bg-foreground.text-background
|
||||
.whitespace-nowrap.pointer-events-none
|
||||
.opacity-0.group-hover:opacity-100.transition-opacity.duration-150
|
||||
.{position classes}
|
||||
{tooltip text}
|
||||
```csharp
|
||||
new Tooltip(
|
||||
text: "Delete item",
|
||||
trigger: new Button("🗑", size: "icon", variant: "ghost"))
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## CSS mechanics
|
||||
|
||||
| Utility | Effect |
|
||||
|---|---|
|
||||
| `group` on wrapper | Enables `group-hover:*` utilities on descendants |
|
||||
| `opacity-0` | Tooltip invisible at rest |
|
||||
| `group-hover:opacity-100` | Tooltip fades in when the wrapper (group) is hovered |
|
||||
| `transition-opacity duration-150` | 150ms fade animation |
|
||||
| `pointer-events-none` | Tooltip itself doesn't interfere with hover detection |
|
||||
| `bg-foreground text-background` | Dark-on-light / light-on-dark automatically via CSS variables |
|
||||
| `whitespace-nowrap` | Prevents the tooltip from wrapping |
|
||||
| `z-50` | Floats above surrounding content |
|
||||
|
||||
**Position classes by `position` parameter:**
|
||||
|
||||
| Position | Classes |
|
||||
|---|---|
|
||||
| `top` (default) | `bottom-full mb-1.5 left-1/2 -translate-x-1/2` |
|
||||
| `bottom` | `top-full mt-1.5 left-1/2 -translate-x-1/2` |
|
||||
| `left` | `right-full mr-1.5 top-1/2 -translate-y-1/2` |
|
||||
| `right` | `left-full ml-1.5 top-1/2 -translate-y-1/2` |
|
||||
Hover over the button and the label "Delete item" appears above it.
|
||||
|
||||
---
|
||||
|
||||
## Constructor signature
|
||||
## All the options
|
||||
|
||||
```csharp
|
||||
public Tooltip(
|
||||
@@ -51,33 +27,48 @@ public Tooltip(
|
||||
string position = "top")
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
| Parameter | What it does |
|
||||
|---|---|
|
||||
| `text` | Tooltip label (plain text; HTML not supported) |
|
||||
| `trigger` | Any `IHtmxComponent` that acts as the hover target |
|
||||
| `position` | `"top"` / `"bottom"` / `"left"` / `"right"` |
|
||||
| `text` | The tooltip text. Plain text only — no HTML. |
|
||||
| `trigger` | Any `IHtmxComponent` — this is the element the user hovers over. |
|
||||
| `position` | Where the tooltip appears: `"top"` (default), `"bottom"`, `"left"`, or `"right"`. |
|
||||
|
||||
---
|
||||
|
||||
## Usage examples
|
||||
## Real-world examples
|
||||
|
||||
### Icon button with tooltip
|
||||
### Icon buttons in a toolbar
|
||||
|
||||
```csharp
|
||||
new Tooltip(text: "Bold", trigger: new Button("B", size: "icon", variant: "ghost"))
|
||||
new Tooltip(text: "Italic", trigger: new Button("I", size: "icon", variant: "ghost"))
|
||||
new Tooltip(text: "Save", trigger: new Button("💾", size: "icon", variant: "ghost"))
|
||||
```
|
||||
|
||||
### Right-aligned tooltip (near the left edge of the UI)
|
||||
|
||||
```csharp
|
||||
new Tooltip(
|
||||
text: "Delete item",
|
||||
trigger: new Button("🗑", size: "icon", variant: "ghost"))
|
||||
text: "View help documentation",
|
||||
trigger: new Button("?", size: "icon", variant: "outline"),
|
||||
position: "right")
|
||||
```
|
||||
|
||||
### Top/bottom/left/right positions
|
||||
### Below the element
|
||||
|
||||
```csharp
|
||||
new Tooltip(text: "Above", trigger: new Button("Hover me"), position: "top")
|
||||
new Tooltip(text: "Below", trigger: new Button("Hover me"), position: "bottom")
|
||||
new Tooltip(text: "Left", trigger: new Button("Hover me"), position: "left")
|
||||
new Tooltip(text: "Right", trigger: new Button("Hover me"), position: "right")
|
||||
new Tooltip(
|
||||
text: "This cannot be undone",
|
||||
trigger: new Button("Delete", variant: "destructive"),
|
||||
position: "bottom")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## How it works
|
||||
|
||||
Tooltip wraps the trigger in a `<span class="group">`. The tooltip text is an absolutely positioned `<span>` inside that wrapper with `opacity-0` by default and `group-hover:opacity-100` to fade it in. Because this is pure Tailwind CSS, there is no JavaScript involved and no initialisation needed for HTMX-swapped content.
|
||||
|
||||
### Tooltip on an Avatar
|
||||
|
||||
```csharp
|
||||
|
||||
Reference in New Issue
Block a user