Popovers

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Directions

Click on the buttons below to see the four popovers directions: top, right, bottom, and left.

<!-- Popover on right -->
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Popover on right
</button>

<!-- Popover on top -->
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Popover on top
</button>

<!-- Popover on bottom -->
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Popover on bottom
</button>
<!-- Popover on left -->

<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Popover on left
</button>
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
const popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  return new Popover(popoverTriggerEl);
});
Attribute Value
data-bs-placement="{value}" top | right | bottom | left

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. 

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

Disabled Elements

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. 

<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>

Solid

Create popovers with with solid variant by using data-bs-custom-class="popover-{value}" attribute. 

<!-- Primary -->
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-primary" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Primary
</button>
<!-- Secondary -->
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-secondary" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Secondary
</button>
<!-- Success -->
<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="popover-success" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Success
</button>
<!-- Danger -->
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="popover-danger" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Danger
</button>
<!-- Warning -->
<button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-placement="left" data-bs-custom-class="popover-warning" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Warning
</button>
<!-- Info -->
<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-custom-class="popover-info" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Info
</button>
<!-- Dark -->
<button type="button" class="btn btn-dark" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="popover-dark" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Dark
</button>
Attribute Value
data-bs-custom-class="popover-{value}" primary | secondary | success | danger | warning | info | dark

This loop dynamically generates styles for popovers and their arrows, allowing for easy customization by specifying your desired colors. 

@each $state in map-keys($theme-colors) {
  .popover {
    &.popover-#{$state} {
      --#{$prefix}popover-bg: var(--#{$prefix}#{$state});
      --#{$prefix}popover-header-color: var(--#{$prefix}#{$state}-contrast);
      --#{$prefix}popover-body-color: var(--#{$prefix}#{$state}-contrast);
    }
  }
}

Header color

Create popovers with with solid header color variant by using data-bs-custom-class="popover-{value}" attribute. 

<!-- Primary -->
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-header-primary" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover title">
  Primary
</button>
<!-- Secondary -->
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-header-secondary" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Secondary
</button>
<!-- Success -->
<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="popover-header-success" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Success
</button>
<!-- Danger -->
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-custom-class="popover-header-danger" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Danger
</button>
<!-- Warning -->
<button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-placement="left" data-bs-custom-class="popover-header-warning" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Warning
</button>
<!-- Info -->
<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-custom-class="popover-header-info" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Info
</button>
<!-- Dark -->
<button type="button" class="btn btn-dark" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-custom-class="popover-header-dark" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  Dark
</button>
Attribute Value
data-bs-custom-class="popover-{value}" header-primary | header-secondary | header-success | header-danger | header-warning | header-info | header-dark

This loop dynamically generates styles for the popover header, making it easy to customize by specifying your preferred colors. 

@each $state in map-keys($theme-colors) {
  .popover {
    &.popover-header-#{$state} {
      .popover-header,
      &.bs-popover-auto[data-popper-placement="bottom"] > .popover-arrow::after {
        --#{$prefix}popover-header-bg: var(--#{$prefix}#{$state});
        --#{$prefix}popover-header-color: var(--#{$prefix}#{$state}-contrast);
      }
    }
  }
}

Custom popover

Create popovers with custom colors by using data-bs-custom-class="custom-popover" attribute. 

<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="custom-popover" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">
  custom-popover
</button>

You can customize the appearance of popovers using CSS variables. 

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--#{$prefix}primary);
  --bs-popover-header-bg: var(--#{$prefix}primary);
  --bs-popover-header-color: var(--#{$prefix}white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}
© 2017- Pixinvent, Hand-crafted & Made with ❤️