Posh UI

Tooltip

Tooltip can be used to show user some information, when user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.

Left Tooltip

              
<button class="card-icon-btn tooltip">
  <i class="far fa-heart m-auto"></i>
  <span class="tooltip-left tooltip-text">
    add to wishlist
  </span>
</button>

<button class="bg-red-50 card-icon-btn tooltip">
  <i class="fas fa-heart m-auto"></i>
  <span class="tooltip-left tooltip-text">
    remove from wishlist
  </span>
</button>

Right Tooltip

              
<button class="card-icon-btn tooltip">
  <i class="far fa-heart m-auto"></i>
  <span class="tooltip-right tooltip-text">
    add to wishlist
  </span>
</button>

<button class="bg-red-50 card-icon-btn tooltip">
  <i class="fas fa-heart m-auto"></i>
  <span class="tooltip-right tooltip-text">
    remove from wishlist
  </span>
</button>