319 lines
10 KiB
Markdown
319 lines
10 KiB
Markdown
# Tooltip
|
||
|
||
Tooltip component for displaying helpful hints and additional information on hover.
|
||
|
||
## Tag
|
||
|
||
`Tooltip`
|
||
|
||
## Props
|
||
|
||
| Prop | Type | Default | Description |
|
||
| :--- | :--- | :--- | :--- |
|
||
| `tip` | `string \| VNode \| Signal` | `-` | Tooltip content to display on hover |
|
||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||
| `children` | `VNode` | `-` | Element to attach the tooltip to |
|
||
|
||
## Styling
|
||
|
||
Tooltip supports all **daisyUI Tooltip classes**:
|
||
|
||
| Category | Keywords | Description |
|
||
| :--- | :--- | :--- |
|
||
| Position | `tooltip-top` (default), `tooltip-bottom`, `tooltip-left`, `tooltip-right` | Tooltip position |
|
||
| Color | `tooltip-primary`, `tooltip-secondary`, `tooltip-accent`, `tooltip-info`, `tooltip-success`, `tooltip-warning`, `tooltip-error` | Tooltip color variants |
|
||
|
||
> For further details, check the [daisyUI Tooltip Documentation](https://daisyui.com/components/tooltip) – Full reference for CSS classes.
|
||
|
||
### Example
|
||
|
||
```javascript
|
||
Tooltip({ tip: "This is a tooltip", class: "tooltip-primary" }, [
|
||
Button({ class: "btn" }, "Hover me")
|
||
]);
|
||
```
|
||
|
||
## Live Examples
|
||
|
||
### Basic Tooltip
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const BasicDemo = () => {
|
||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||
Tooltip({ tip: 'This is a tooltip' }, [
|
||
Button({ class: 'btn btn-primary' }, 'Hover me')
|
||
]),
|
||
Tooltip({ tip: 'Tooltips can be placed on any element' }, [
|
||
Span({ class: 'text-sm cursor-help border-b border-dashed' }, 'Help text')
|
||
]),
|
||
Tooltip({ tip: 'Icons can also have tooltips' }, [
|
||
Span({ class: 'text-2xl' }, 'ℹ️')
|
||
])
|
||
]);
|
||
};
|
||
$mount(BasicDemo, '#demo-basic');
|
||
```
|
||
|
||
### Tooltip Positions
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-positions" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const PositionsDemo = () => {
|
||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||
Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
|
||
Button({ class: 'btn btn-sm' }, 'Top')
|
||
]),
|
||
Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
|
||
Button({ class: 'btn btn-sm' }, 'Bottom')
|
||
]),
|
||
Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
|
||
Button({ class: 'btn btn-sm' }, 'Left')
|
||
]),
|
||
Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
|
||
Button({ class: 'btn btn-sm' }, 'Right')
|
||
])
|
||
]);
|
||
};
|
||
$mount(PositionsDemo, '#demo-positions');
|
||
```
|
||
|
||
### Tooltip with Icons
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const IconsDemo = () => {
|
||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||
Tooltip({ tip: 'Save document' }, [
|
||
Button({ class: 'btn btn-ghost btn-circle' }, '💾')
|
||
]),
|
||
Tooltip({ tip: 'Edit item' }, [
|
||
Button({ class: 'btn btn-ghost btn-circle' }, '✏️')
|
||
]),
|
||
Tooltip({ tip: 'Delete permanently' }, [
|
||
Button({ class: 'btn btn-ghost btn-circle text-error' }, '🗑️')
|
||
]),
|
||
Tooltip({ tip: 'Settings' }, [
|
||
Button({ class: 'btn btn-ghost btn-circle' }, '⚙️')
|
||
])
|
||
]);
|
||
};
|
||
$mount(IconsDemo, '#demo-icons');
|
||
```
|
||
|
||
### Form Field Tooltips
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const FormDemo = () => {
|
||
const username = $('');
|
||
const email = $('');
|
||
|
||
return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
|
||
Div({ class: 'flex items-center gap-2' }, [
|
||
Input({
|
||
label: 'Username',
|
||
value: username,
|
||
placeholder: 'Choose a username',
|
||
oninput: (e) => username(e.target.value)
|
||
}),
|
||
Tooltip({ tip: 'Must be at least 3 characters, letters and numbers only' }, [
|
||
Span({ class: 'cursor-help text-info' }, '?')
|
||
])
|
||
]),
|
||
Div({ class: 'flex items-center gap-2' }, [
|
||
Input({
|
||
label: 'Email',
|
||
type: 'email',
|
||
value: email,
|
||
placeholder: 'Enter your email',
|
||
oninput: (e) => email(e.target.value)
|
||
}),
|
||
Tooltip({ tip: 'We\'ll never share your email with anyone' }, [
|
||
Span({ class: 'cursor-help text-info' }, '?')
|
||
])
|
||
])
|
||
]);
|
||
};
|
||
$mount(FormDemo, '#demo-form');
|
||
```
|
||
|
||
### Interactive Tooltip
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-interactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const InteractiveDemo = () => {
|
||
const tooltipText = $('Hover over the button!');
|
||
|
||
const updateTooltip = (text) => {
|
||
tooltipText(text);
|
||
setTimeout(() => {
|
||
tooltipText('Hover over the button!');
|
||
}, 2000);
|
||
};
|
||
|
||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||
Tooltip({ tip: () => tooltipText() }, [
|
||
Button({
|
||
class: 'btn btn-primary btn-lg',
|
||
onclick: () => Toast('Button clicked!', 'alert-info', 2000)
|
||
}, 'Interactive Button')
|
||
]),
|
||
Div({ class: 'flex gap-2 flex-wrap justify-center mt-4' }, [
|
||
Button({
|
||
class: 'btn btn-xs',
|
||
onclick: () => updateTooltip('You clicked the button!')
|
||
}, 'Change Tooltip'),
|
||
Button({
|
||
class: 'btn btn-xs',
|
||
onclick: () => updateTooltip('Try hovering now!')
|
||
}, 'Change Again')
|
||
])
|
||
]);
|
||
};
|
||
$mount(InteractiveDemo, '#demo-interactive');
|
||
```
|
||
|
||
### Rich Tooltip Content
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-rich" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const RichDemo = () => {
|
||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||
Tooltip({
|
||
tip: Div({ class: 'text-left p-1' }, [
|
||
Div({ class: 'font-bold' }, 'User Info'),
|
||
Div({ class: 'text-xs' }, 'John Doe'),
|
||
Div({ class: 'text-xs' }, 'john@example.com'),
|
||
Div({ class: 'badge badge-xs badge-primary mt-1' }, 'Admin')
|
||
])
|
||
}, [
|
||
Button({ class: 'btn btn-outline' }, 'User Profile')
|
||
]),
|
||
Tooltip({
|
||
tip: Div({ class: 'text-left p-1' }, [
|
||
Div({ class: 'font-bold flex items-center gap-1' }, [
|
||
Span({}, '⚠️'),
|
||
Span({}, 'System Status')
|
||
]),
|
||
Div({ class: 'text-xs' }, 'All systems operational'),
|
||
Div({ class: 'text-xs text-success' }, '✓ 99.9% uptime')
|
||
])
|
||
}, [
|
||
Button({ class: 'btn btn-outline' }, 'System Status')
|
||
])
|
||
]);
|
||
};
|
||
$mount(RichDemo, '#demo-rich');
|
||
```
|
||
|
||
### Color Variants
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-colors" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const ColorsDemo = () => {
|
||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||
Tooltip({ tip: 'Primary tooltip', class: 'tooltip-primary' }, [
|
||
Button({ class: 'btn btn-primary btn-sm' }, 'Primary')
|
||
]),
|
||
Tooltip({ tip: 'Secondary tooltip', class: 'tooltip-secondary' }, [
|
||
Button({ class: 'btn btn-secondary btn-sm' }, 'Secondary')
|
||
]),
|
||
Tooltip({ tip: 'Accent tooltip', class: 'tooltip-accent' }, [
|
||
Button({ class: 'btn btn-accent btn-sm' }, 'Accent')
|
||
]),
|
||
Tooltip({ tip: 'Info tooltip', class: 'tooltip-info' }, [
|
||
Button({ class: 'btn btn-info btn-sm' }, 'Info')
|
||
]),
|
||
Tooltip({ tip: 'Success tooltip', class: 'tooltip-success' }, [
|
||
Button({ class: 'btn btn-success btn-sm' }, 'Success')
|
||
]),
|
||
Tooltip({ tip: 'Warning tooltip', class: 'tooltip-warning' }, [
|
||
Button({ class: 'btn btn-warning btn-sm' }, 'Warning')
|
||
]),
|
||
Tooltip({ tip: 'Error tooltip', class: 'tooltip-error' }, [
|
||
Button({ class: 'btn btn-error btn-sm' }, 'Error')
|
||
])
|
||
]);
|
||
};
|
||
$mount(ColorsDemo, '#demo-colors');
|
||
```
|
||
|
||
### All Tooltip Positions
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-all-positions" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-3 gap-4 justify-items-center"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const AllPositionsDemo = () => {
|
||
return Div({ class: 'grid grid-cols-3 gap-4 justify-items-center' }, [
|
||
Div({ class: 'col-start-2' }, [
|
||
Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
|
||
Button({ class: 'btn btn-sm w-24' }, 'Top')
|
||
])
|
||
]),
|
||
Div({ class: 'col-start-1 row-start-2' }, [
|
||
Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
|
||
Button({ class: 'btn btn-sm w-24' }, 'Left')
|
||
])
|
||
]),
|
||
Div({ class: 'col-start-3 row-start-2' }, [
|
||
Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
|
||
Button({ class: 'btn btn-sm w-24' }, 'Right')
|
||
])
|
||
]),
|
||
Div({ class: 'col-start-2 row-start-3' }, [
|
||
Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
|
||
Button({ class: 'btn btn-sm w-24' }, 'Bottom')
|
||
])
|
||
])
|
||
]);
|
||
};
|
||
$mount(AllPositionsDemo, '#demo-all-positions');
|
||
``` |