Tooltip

Hoverable popup text hint

Properties#

NameDescription
.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>