Note: The planet UI design system is an extension of the bootstrap framework. Please also referer to the bootstrap documentation for best pratices while using the framework.

Popover

Popover default style

Popover position

<button type="button" class="btn btn-primary" data-bs-trigger="hover" 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" data-bs-trigger="focus" 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" data-bs-trigger="focus" 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" data-bs-trigger="focus" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

Popover with template

<button type="button" 
  class="btn btn-primary" 
  data-bs-container="body" 
  data-bs-toggle="popover" 
  data-bs-placement="right" 
  data-bs-html="true" 
  data-bs-title="Title of the tip" 
  data-bs-trigger="focus" 
  data-bs-content='<p>Content of the tooltip is coming here. (Replace this)</p>
        <div class="d-flex justify-content-between">
          <div>Tip 1/4</div>
          <div><a href="#">prev</a> / <a href="#">next</a></div>
        </div>'
  >
  Popover with title and body
</button>