Tooltip
Hoverable popup text hint
Properties#
| Name | Description |
|---|---|
| .tooltip | The tooltip component |
| .tooltip-container | The tooltip container component |
.tooltip-left .tooltip-right .tooltip-top-left .tooltip-top-center .tooltip-top-right .tooltip-bottom-left .tooltip-bottom-center .tooltip-bottom-right | The tooltip display position |
Features#
default#
The default popover container's background color is transparent. You may paint the color yourself.
This is a top-right tooltip!This is a top tooltip!This is a top-left tooltip!
This is a left tooltip!This is a right tooltip!
This is a bottom-right tooltip!This is a bottom tooltip!This is a bottom-left tooltip!
<span class="tooltip tooltip-top-right">
<button class="button text-gray-700 bg-gray-300">top right</button>
<span class="tooltip-container rounded text-sm text-white" style="background: rgba(0,0,0,.65);">
<span class="whitespace-pre">This is a top-right tooltip!</span>
</span>
</span>