I’m working on an Angular form using Tailwind CSS and the Flowbite library for tooltips. The tooltip is supposed to appear next to the username input field when the field is invalid and touched. However, the tooltip is not showing up. Here’s the relevant HTML snippet:

<div>
  <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
    Your username
  </label>
  <div class="relative">
    <input
      type="username"
      name="username"
      id="username"
      formControlName="username"
      [ngClass]="{'border-red-700': username?.invalid && username?.touched}"
      class="mt-1 placeholder-gray-400 shadow appearance-none border rounded w-full py-3 px-3 text-gray-700 leading-tight transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:outline-none focus:border-gray-400 focus:shadow-outline-gray"
      placeholder="username"
    />
    <div *ngIf="username?.invalid && username?.touched" data-tooltip-target="tooltip-username" class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer">
      <svg class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
      </svg>
    </div>
    <div id="tooltip-username" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-red-700 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
      <span>Username is Required</span>
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
  </div>
</div>

I’m using Tailwind CSS for the styling and Flowbite for handling tooltips. The tooltip is supposed to appear when the input is invalid and touched, but it remains invisible. I’ve set data-tooltip-target and added opacity transitions, but still no luck.

Am I missing something specific to Flowbite or Tailwind? Any help or suggestions would be appreciated!