Popover

To make a popover show on hover or focus, add the event name to the data-trigger attribute. e.g., data-trigger="hover". There are several other data attributes you can specify. See the full list here: Bootstrap Popover

REQUIRES JAVASCRIPT
This element requires both jQuery and corelogic-ui.min.js to function properly.

If you would like to only load the popover, make sure to load @corelogic/clui/dist/js/components/popover.js and initialize the component by calling window.clui.popoverInit().

Base Popover

<div style="position: relative">
  <button type="button" class="btn btn-default" data-trigger="hover" data-toggle="popover"
  data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on left (Hover)
  </button>

  <button type="button" class="btn btn-default" data-trigger="click"data-toggle="popover"
  data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on top (Click)
  </button>

  <button type="button" class="btn btn-default" data-trigger="focus" data-toggle="popover"
  data-placement="bottom" data-content="Vivamus
  sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on bottom (Focus)
  </button>

  <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right"
  data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on right (Default)
  </button>
</div>