Popovers - Flex UI Library

Popovers

Basic Popover

<button id="basicPopover" type="button" class="btn btn-primary" data-toggle="popover" data-content="There was a time when breakfast was boring. Why? Because it wasn’t Pop-Tarts toaster pastries.">
  Click to toggle popover
</button>

<script>
  jQuery(function ($) {
    $('#basicPopover').flexPopover();
  });
</script>

Popover with Title

Set a popover title with the title attribute on the trigger button.

<button id="popoverWithTitle" type="button" class="btn btn-primary" data-toggle="popover" title="Pop-Tarts® S'Mores" data-content="Chocolate and marshmallow filling camped out inside a chocolate-frosted graham cracker crust.  Odds are, they're tastiest toasted.">
  Click to toggle popover
</button>

<script>
  jQuery(function ($) {
    $('#popoverWithTitle').flexPopover();
  });
</script>

Popover with Title and "Done" button

To add a button for closing the popover, include closeButtonText in the options.

<button id="popoverWithTitleAndFooter" type="button" class="btn btn-primary" data-toggle="popover" title="Pop-Tarts® Chocolate Fudge" data-content="Aw, fudge - could you be any more delicious? Chocolate frosting, chocolate-flavored filling, chocolate crust with little white sprinkles...definitely not.">
  Click to toggle popover
</button>

<script>
  jQuery(function ($) {
    $('#popoverWithTitleAndFooter').flexPopover({closeButtonText: 'Yum'});
  });
</script>

Custom Class

Add a class to the popover with the popoverClass option.

<button id="customClassPopover" type="button" class="btn btn-primary" data-toggle="popover" data-content="Then we thought, &quot;You know what this really needs? FROSTING.&quot; But we didn’t stop there - we did the same thing with dozens of other flavors. You’re welcome world.">
  Click to toggle popover
</button>

<script>
  jQuery(function ($) {
    $('#customClassPopover').flexPopover({popoverClass: 'pretty'});
  });
</script>

<style>
  .pretty {
    background: linear-gradient(65deg, hotpink, orange, yellow, lightgreen, cyan, deepskyblue, rebeccapurple);
  }
</style>