<div class="tooltip tooltip-open tooltip-left tooltip-primary" data-tip="hello">
<img src="https://picsum.photos/64/64" />
</div>
<div class="tooltip tooltip-open tooltip-bottom tooltip-secondary" data-tip="hello">
<img src="https://picsum.photos/64/64" />
</div>
<div class="tooltip tooltip-open tooltip-right tooltip-accent" data-tip="hello">
<img src="https://picsum.photos/64/64" />
</div>
@jrmc.tooltip({ text: 'hello', class: 'tooltip-open tooltip-left tooltip-primary' })
<img src="https://picsum.photos/64/64" />
@end
@jrmc.tooltip({ text: 'hello', class: 'tooltip-open tooltip-bottom tooltip-secondary' })
<img src="https://picsum.photos/64/64" />
@end
@jrmc.tooltip({ text: 'hello', class: 'tooltip-open tooltip-right tooltip-accent' })
<img src="https://picsum.photos/64/64" />
@end
Doc : daisyui tooltip
Tooltip can be used to show a message when hovering over an element.
| Class name | Type | |
|---|---|---|
| tooltip | Component | Container element |
| tooltip-open | Component | Force open tooltip |
| tooltip-bottom | Modifier | Put tooltip on bottom |
| tooltip-left | Modifier | Put tooltip on left |
| tooltip-right | Modifier | Put tooltip on right |
| tooltip-primary | Modifier | Adds primary color to tooltip |
| tooltip-secondary | Modifier | Adds secondary color to tooltip |
| tooltip-accent | Modifier | Adds accent color to tooltip |
| tooltip-info | Modifier | Adds info color to tooltip |
| tooltip-success | Modifier | Adds success color to tooltip |
| tooltip-warning | Modifier | Adds warning color to tooltip |
| tooltip-error | Modifier | Adds error color to tooltip |