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

View example's code

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</a>
  
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right</a>
  
<a href="#" 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>
  

<button type="button" class="btn btn-soft-primary rounded-pill" 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-pill" 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-pill" 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-pill" 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

View example's code

<a class="btn btn-primary rounded-pill" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="top" title="Sample Title" data-bs-content="Top popover">
  Popover on top
</a>

<a class="btn btn-primary rounded-pill" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="Sample Title" data-bs-content="Right popover">
  Popover on right
</a>

<a class="btn btn-primary rounded-pill" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="bottom" title="Sample Title" data-bs-content="Bottom popover">
  Popover on bottom
</a>

<a class="btn btn-primary rounded-pill" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left" title="Sample Title" data-bs-content="Left popover">
  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

Hands-On

Contact Info

Learn More

Follow Us

Snippets

Tooltips & Popovers

Tooltips

Popovers

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