PF Next

Popover Migration

PatternFly 3 Popover

Preview

<div class="popovers-pf">
  <div class="container-fluid container-popovers-pf">
    <div class="popover fade right in" role="tooltip" style="display: block; position:relative;">
      <div class="arrow" style="top: 50%;"></div>
      <h3 class="popover-title closable">Popover Header
        <button type="button" class="close" aria-hidden="true"><span class="pficon pficon-close"></span></button>
      </h3>
      <div class="popover-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
    </div>
  </div>
</div>

PatternFly 4 Popover

Preview

<div class="pf-c-popover pf-m-right" role="dialog" aria-modal="true" aria-labelledby="popover-right-header" aria-describedby="popover-right-body">
  <div class="pf-c-popover__arrow">
  </div>
  <div class="pf-c-popover__content">
    <div class="pf-c-popover__close">
      <button class="pf-c-button pf-m-plain" aria-label="Close">
        <i class="fas fa-times"></i>
      </button>
    </div>
    <header class="pf-c-popover__header">
      <h1 class="pf-c-popover__header-title" id="popover-right-header">
        Popover Header
      </h1>
    </header>
    <div class="pf-c-popover__body" id="popover-right-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
    </div>
  </div>
</div>

Documentation

Overview

When converting PatternFly 3 components to PatternFly 4 components, you must also take into consideration the layouts and sizings that PatternFly 3 utilized from Bootstrap 3.

Usage

PF3 Class Applied To PF4 Class Applied To Outcome
.popovers-pf <div> pf-c-popover <div> Creates parent container that holds the popover.
.popover <div> .pf-c-popover__content <div> Creates the container for the popover itself.
.container-popovers-pf <div> -- -- Creates the container for the popover.
.top <div> .pf-m-top <div> Directs the direction of the popover arrow. Required.
.right <div> .pf-m-right <div> Directs the direction of the popover arrow. Required.
.bottom <div> .pf-m-bottom <div> Directs the direction of the popover arrow. Required.
.left <div> .pf-m-left <div> Directs the direction of the popover arrow. Required.
.arrow <div> .pf-c-popover__arrow <div> Creates an arrow pointing towards the element the popover describes. Required.
.close <span> .pf-c-popover__close <div> Creates the closing button for the popover.
-- -- .pf-c-popover__header <header> Creates popover header.
.popover-title <h3> .pf-c-popover__header-title <h1> Creates popover title.
.popover-content <div> .pf-c-popover__body <div> Creates the body of a popover. Required.