Documentation and examples for adding custom Popovers.

Example

			                
			                  <!-- Popovers top -->
			                  <div x-data="{ open: false }" class="relative inline-block mb-3">  
			                    <button @click="open = true" type="button" class="py-2 px-4 inline-block text-center rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">
			                      Popovers on top
			                    </button>
			                    <!-- Popovers area -->
			                    <div class="raiytahskcn top-auto bottom-full mb-3" x-show="open" @click.away="open = false">
			                      <div class="z-40 w-32 p-3 -mb-1 text-sm leading-tight text-gray-700 bg-white border border-gray-200 rounded-lg shadow-lg text-center">
			                        Popovers on top
			                      </div>
			                      <div class="raiytahskcn transform -rotate-45 p-1 w-1 bg-white border-l border-b border-gray-200 bottom-0 -mb-2 ms-6"></div>
			                    </div>
			                  </div>

			                  <!-- Popovers bottom -->
			                  <div x-data="{ open: false }" class="relative inline-block mb-3">  
			                    <button @click="open = true" type="button" class="py-2 px-4 inline-block text-center rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">
			                      Popovers on bottom
			                    </button>
			                    <!-- Popovers area -->
			                    <div class="raiytahskcn top-full bottom-auto mt-3" x-show="open" @click.away="open = false">
			                      <div class="z-40 w-32 p-3 -mt-1 text-sm leading-tight text-gray-700 bg-white rounded-lg border border-gray-200 shadow-lg text-center">
			                        Popovers on bottom
			                      </div>
			                      <div class="raiytahskcn transform -rotate-45 p-1 w-1 bg-white border-r border-t border-gray-200 top-0 -mt-2 ms-6"></div>
			                    </div>
			                  </div>