Docs Updated
This commit is contained in:
@@ -8,11 +8,30 @@ Tooltip component for displaying helpful hints and additional information on hov
|
||||
|
||||
## 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 |
|
||||
| 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
|
||||
|
||||
@@ -35,7 +54,7 @@ const BasicDemo = () => {
|
||||
Span({ class: 'text-sm cursor-help border-b border-dashed' }, 'Help text')
|
||||
]),
|
||||
Tooltip({ tip: 'Icons can also have tooltips' }, [
|
||||
Icons.iconInfo
|
||||
Span({ class: 'text-2xl' }, 'ℹ️')
|
||||
])
|
||||
]);
|
||||
};
|
||||
@@ -154,7 +173,6 @@ $mount(FormDemo, '#demo-form');
|
||||
|
||||
```javascript
|
||||
const InteractiveDemo = () => {
|
||||
const showTip = $(false);
|
||||
const tooltipText = $('Hover over the button!');
|
||||
|
||||
const updateTooltip = (text) => {
|
||||
@@ -211,7 +229,7 @@ const RichDemo = () => {
|
||||
Tooltip({
|
||||
tip: Div({ class: 'text-left p-1' }, [
|
||||
Div({ class: 'font-bold flex items-center gap-1' }, [
|
||||
Icons.iconWarning,
|
||||
Span({}, '⚠️'),
|
||||
Span({}, 'System Status')
|
||||
]),
|
||||
Div({ class: 'text-xs' }, 'All systems operational'),
|
||||
@@ -303,252 +321,4 @@ const AllPositionsDemo = () => {
|
||||
]);
|
||||
};
|
||||
$mount(AllPositionsDemo, '#demo-all-positions');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initTooltipExamples = () => {
|
||||
|
||||
// 1. Basic Tooltip
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
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' }, [
|
||||
Icons.iconInfo
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Tooltip Positions
|
||||
const positionsTarget = document.querySelector('#demo-positions');
|
||||
if (positionsTarget && !positionsTarget.hasChildNodes()) {
|
||||
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, positionsTarget);
|
||||
}
|
||||
|
||||
// 3. Tooltip with Icons
|
||||
const iconsTarget = document.querySelector('#demo-icons');
|
||||
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
||||
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, iconsTarget);
|
||||
}
|
||||
|
||||
// 4. Form Field Tooltips
|
||||
const formTarget = document.querySelector('#demo-form');
|
||||
if (formTarget && !formTarget.hasChildNodes()) {
|
||||
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, formTarget);
|
||||
}
|
||||
|
||||
// 5. Interactive Tooltip
|
||||
const interactiveTarget = document.querySelector('#demo-interactive');
|
||||
if (interactiveTarget && !interactiveTarget.hasChildNodes()) {
|
||||
const InteractiveDemo = () => {
|
||||
const showTip = $(false);
|
||||
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, interactiveTarget);
|
||||
}
|
||||
|
||||
// 6. Rich Tooltip Content
|
||||
const richTarget = document.querySelector('#demo-rich');
|
||||
if (richTarget && !richTarget.hasChildNodes()) {
|
||||
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' }, [
|
||||
Icons.iconWarning,
|
||||
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, richTarget);
|
||||
}
|
||||
|
||||
// 7. Color Variants
|
||||
const colorsTarget = document.querySelector('#demo-colors');
|
||||
if (colorsTarget && !colorsTarget.hasChildNodes()) {
|
||||
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, colorsTarget);
|
||||
}
|
||||
|
||||
// 8. All Tooltip Positions
|
||||
const allPositionsTarget = document.querySelector('#demo-all-positions');
|
||||
if (allPositionsTarget && !allPositionsTarget.hasChildNodes()) {
|
||||
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-2 row-start-2' }, [
|
||||
Tooltip({ tip: 'Center tooltip', class: 'tooltip' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Center')
|
||||
])
|
||||
]),
|
||||
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, allPositionsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initTooltipExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initTooltipExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
Reference in New Issue
Block a user