Image
dash ui - bootstrap 5 admin dashboard template
dash ui - admin dashboard template
Unlimited Access

Upgrade your plan from a Free trial, to select Business Plan. Start Now

Upgrade Now

Popovers

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Default Popovers

 <!-- example -->
   <button type="button" class="btn  btn-primary" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Four directions

Four options are available: top, right, bottom, and left aligned.

 <!-- four directions -->
  <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on top
  </button>

  <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on right
  </button>

  <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus
  sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on bottom
  </button>

  <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on left
  </button>

Dismiss on next click

Use the focus trigger to dismiss popovers on the user’s next click of a different element than the toggle element. 

 <!-- dismiss on next click -->
   <a tabindex="0" class="btn  btn-danger" role="button" data-bs-toggle="popover" data-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0".

For disabled popover triggers, you may also prefer data-bs-trigger="hover focus" so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.

 <!-- disabled-element -->
  <span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
    <button class="btn btn-primary" type="button" disabled>Disabled button</button>
  </span>
Contents