Tooltips

The tooltips can appear on the bottom, top, right, and left of the element when hovered over. . Here’s how to style them

<div class="tooltip">
    Hover over me
  <span class="tooltiptext-bottom bg-red">text btm</span>
</div>
<div class="tooltip">
    Hover over me
  <span class="tooltiptext-top">Text top</span>
</div>
<div class="tooltip">
    Hover over me
   <span class="tooltiptext-right">Text right</span>
</div>
<div class="tooltip">
    Hover over me
    <span class="tooltiptext-left">Text left</span>
</div>

Key Features

1. Hover Interaction: Displays tooltip text on hovering over the .tooltip element.

2. Positioning: Tooltip text can be positioned at the bottom, top, right, or left of the trigger element using .tooltiptext-bottom, .tooltiptext-top, .tooltiptext-right, and .tooltiptext-left classes.

3. Styling: Additional classes like .bg-red provide options for custom tooltip background colors.

4. Accessibility: Enhances user experience by providing contextual information adjacent to the relevant content.