Tooltips

<div class="flex justify-center">
          <div class="tooltip" tabindex="0">
                <button  class="badge-color-slate-500 badge-pill aspect-ratio-square w-7">
                    <i class="fa-light fa-chevron-up text-xs items-center"></i>
                </button>
                <div class="tooltip-content direction-up" tabindex="-1">
                        <p class="badge-color-slate-500 badge-pill whitespace-nowrap">This is amazing</p>
                </div>
            </div>
          </div>

<div class="flex justify-center">
          <div class="tooltip" tabindex="0">
                <button  class="badge-color-slate-500 badge-pill aspect-ratio-square w-7">
                    <i class="fa-light fa-chevron-down text-xs items-center"></i>
                </button>
                <div class="tooltip-content direction-down" tabindex="-1">
                        <p class="badge-color-slate-500 badge-pill whitespace-nowrap">This is amazing</p>
                </div>
            </div>
          </div>

<div class="flex justify-center">
          <div class="tooltip" tabindex="0">
                <button  class="badge-color-slate-500 badge-pill aspect-ratio-square w-7">
                    <i class="fa-light fa-chevron-left text-xs items-center"></i>
                </button>
                <div class="tooltip-content direction-left" tabindex="-1">
                        <p class="badge-color-slate-500 badge-pill whitespace-nowrap">This is amazing</p>
                </div>
            </div>
          </div>

<div class="flex justify-center">
          <div class="tooltip" tabindex="0">
                <button  class="badge-color-slate-500 badge-pill aspect-ratio-square w-7">
                    <i class="fa-light fa-chevron-right text-xs items-center"></i>
                </button>
                <div class="tooltip-content direction-right" tabindex="-1">
                        <p class="badge-color-slate-500 badge-pill whitespace-nowrap">This is amazing</p>
                </div>
            </div>
          </div>

<div class="flex justify-center">
          <div class="tooltip" tabindex="0">
                <button  class="badge-color-slate-500 badge-pill aspect-ratio-square w-7">
                    <i class="fa-light fa-arrows-up-down-left-right text-xs items-center"></i>
                </button>
                <div class="tooltip-content direction-left" tabindex="-1">
                        <p class="badge-color-slate-500 badge-pill whitespace-nowrap">Left</p>
                </div>
                <div class="tooltip-content direction-right" tabindex="-1">
                        <p class="badge-color-slate-500 badge-pill whitespace-nowrap">Right</p>
                </div>
                <div class="tooltip-content direction-up" tabindex="-1">
                        <p class="badge-color-slate-500 badge-pill whitespace-nowrap">Up</p>
                </div>
                <div class="tooltip-content direction-down" tabindex="-1">
                        <p class="badge-color-slate-500 badge-pill whitespace-nowrap">Down</p>
                </div>
            </div>
          </div>