AXA Design System Lib Documentation v1.0.0

Popover displays an overlay giving the user access to additional content and action by hover over, focus on, or tap an element.

Example

<button
  type="button"
  class="btn btn-secondary"
  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>  

<!–- script to add after loading all required js dependencies (axaDesignSystemLib/popper) –->
<script>
  // Enable popover everywhere
  var popoverTriggerList = [].slice.call(document.querySelectorAll(’[data-bs-toggle=“popover”]’))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl) }
    )
</script>

Four directions

You can define the position where the popover will be displayed.

<button
  type="button"
  class="btn btn-primary m-1"
  data-bs-container="body"
  data-bs-toggle="popover"
  data-bs-placement="top"
  data-bs-content="Top popover"
>
  Popover on top
</button>
<button
  type="button"
  class="btn btn-primary m-1"
  data-bs-container="body"
  data-bs-toggle="popover"
  data-bs-placement="right"
  data-bs-content="Right popover"
>
  Popover on right
</button>
<button
  type="button"
  class="btn btn-primary m-1"
  data-bs-container="body"
  data-bs-toggle="popover"
  data-bs-placement="bottom"
  data-bs-content="Bottom popover"
>
  Popover on bottom
</button>
<button
  type="button"
  class="btn btn-primary m-1"
  data-bs-container="body"
  data-bs-toggle="popover"
  data-bs-placement="left"
  data-bs-content="Left popover"
>
  Popover on left
</button>

Bottom with title

Add custom data-bs-template to change arrow color when popover with title shown at the bottom (arrow with same gray color as title background)

<button 
  type="button" 
  class="btn btn-primary"
  data-bs-container="body"
  data-bs-toggle="popover"
  data-bs-placement="bottom"
  title="Popover title"
  data-bs-content="Bottom popover"
>
  Popover on bottom
</button>

Documentation

Components