Tooltips & Popovers

Use Bootstrap Tooltips and Popovers with our custom styles to add tooltips and popovers to any element on your website.

Tooltips

Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left 

                      <a href="#" class="mr-5" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</a>
                      <a href="#" class="mr-5" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right</a>
                      <a href="#" class="mr-5" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a>
                      <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left</a>
                      <div class="mt-5"></div>
                      <button type="button" class="btn btn-soft-primary !rounded-[50rem] !mr-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"> Tooltip on top </button>
                      <button type="button" class="btn btn-soft-primary !rounded-[50rem] !mr-2" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right"> Tooltip on right </button>
                      <button type="button" class="btn btn-soft-primary !rounded-[50rem] !mr-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button>
                      <button type="button" class="btn btn-soft-primary !rounded-[50rem] !mr-2" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left"> Tooltip on left </button>

Popovers

Popover on top Popover on right Popover on bottom Popover on left 

                      <a class="btn btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="top" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."> Popover on top </a>
                      <a class="btn btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."> Popover on right </a>
                      <a class="btn btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="bottom" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."> Popover on bottom </a>
                      <a class="btn btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."> Popover on left </a>

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox
image