Tooltip

Use the following Tailwind CSS powered tooltips to show extra content when hovering or focusing on an element

Basic Example

<button
                                       data-bs-toggle="tooltip"
                                       data-bs-placement="top"
                                       data-bs-title="Tooltip on top"
                                       type="button"
                                       class="btn gap-x-2 bg-indigo-600 text-white
                                          border-indigo-600 disabled:opacity-50 disabled:pointer-events-none
                                          hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800
                                          active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300
                                          "
                                       >
                                    Tooltip on Top
                                    </button>
                                    <button
                                       data-bs-toggle="tooltip"
                                       data-bs-placement="bottom"
                                       data-bs-title="Tooltip on Bottom"
                                       type="button"
                                       class="btn gap-x-2 bg-indigo-600 text-white
                                          border-indigo-600 disabled:opacity-50 disabled:pointer-events-none
                                          hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800
                                          active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300
                                          "
                                       >
                                    Tooltip on Bottom
                                    </button>
                                    <button
                                       data-bs-toggle="tooltip"
                                       data-bs-placement="right"
                                       data-bs-title="Tooltip on Right"
                                       type="button"
                                       class="btn gap-x-2 bg-indigo-600 text-white
                                          border-indigo-600 disabled:opacity-50 disabled:pointer-events-none
                                          hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800
                                          active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300
                                          "
                                       >
                                    Tooltip on Right
                                    </button>
                                    <button
                                       data-bs-toggle="tooltip"
                                       data-bs-placement="left"
                                       data-bs-title="Tooltip on Left"
                                       type="button"
                                       class="btn gap-x-2 bg-indigo-600 text-white
                                          border-indigo-600 disabled:opacity-50 disabled:pointer-events-none
                                          hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800
                                          active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300
                                          "
                                       >
                                    Tooltip on Left
                                    </button>
Buy Pro