Popover

Popovers contain helpful information such as an explanation of a context.

install	yarn add @clayui/popover
version
use	`import Popover from '@clayui/popover';`

Table of Contents

Position
Top
Right
Bottom
Left
Widths
Popover Width Large
Popover Width Sass API
Variants
Popover Secondary
Popover Variant Sass API

Position

Top

Snippet

<div className="clay-popover-top fade popover show">
  <div className="arrow"></div>
  <div className="inline-scroller">
    <div className="popover-header">Popover top</div>
    <div className="popover-body">
      Viennese flavour cup eu, percolator froth ristretto mazagran caffeine.
      White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go
      macchiato strong.
    </div>
  </div>
</div>
<div className="clay-popover-top-left fade popover show">
  <div className="arrow"></div>
  <div className="inline-scroller">
    <div className="popover-header">Popover top left</div>
    <div className="popover-body">
      Viennese flavour cup eu, percolator froth ristretto mazagran caffeine.
      White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go
      macchiato strong.
    </div>
  </div>
</div>
<div className="clay-popover-top-right fade popover show">
  <div className="arrow"></div>
  <div className="inline-scroller">
    <div className="popover-header">Popover top right</div>
    <div className="popover-body">
      Viennese flavour cup eu, percolator froth ristretto mazagran caffeine.
      White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go
      macchiato strong.
    </div>
  </div>
</div>

Right

Snippet

<div className="clay-popover-right fade popover show">
  <div className="arrow"></div>
  <div className="inline-scroller">
    <div className="popover-header">Popover right</div>
    <div className="popover-body">
      Viennese flavour cup eu, percolator froth ristretto mazagran caffeine.
      White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go
      macchiato strong.
    </div>
  </div>
</div>
<div className="clay-popover-right-top fade popover show">
  <div className="arrow"></div>
  <div className="inline-scroller">
    <div className="popover-header">Popover right top</div>
    <div className="popover-body">
      Viennese flavour cup eu, percolator froth ristretto mazagran caffeine.
      White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go
      macchiato strong.
    </div>
  </div>
</div>
<div className="clay-popover-right-bottom fade popover show">
  <div className="arrow"></div>
  <div className="inline-scroller">
    <div className="popover-header">Popover right bottom</div>
    <div className="popover-body">
      Viennese flavour cup eu, percolator froth ristretto mazagran caffeine.
      White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go
      macchiato strong.
    </div>
  </div>
</div>

Bottom

Snippet

<div className="clay-popover-bottom fade popover show">
  <div className="arrow"></div>
  <div className="inline-scroller">
    <div className="popover-header">Popover right bottom</div>
    <div className="popover-body">
      Viennese flavour cup eu, percolator froth ristretto mazagran caffeine.
      White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go
      macchiato strong.
    </div>
  </div>
</div>
<div className="clay-popover-bottom-left fade popover show">
  <div className="arrow"></div>
  <div className="inline-scroller">
    <div className="popover-header">Popover right bottom left</div>
    <div className="popover-body">
      Viennese flavour cup eu, percolator froth ristretto mazagran caffeine.
      White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go
      macchiato strong.
    </div>
  </div>
</div>
<div className="clay-popover-bottom-right fade popover show">
  <div className="arrow"></div>
  <div className="inline-scroller">
    <div className="popover-header">Popover right bottom right</div>
    <div className="popover-body">
      Viennese flavour cup eu, percolator froth ristretto mazagran caffeine.
      White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go
      macchiato strong.
    </div>
  </div>
</div>

Left

Snippet

<div className="clay-popover-left fade popover show">
  <div className="arrow"></div>
  <div className="inline-scroller">
    <div className="popover-header">Popover left</div>
    <div className="popover-body">
      Viennese flavour cup eu, percolator froth ristretto mazagran caffeine.
      White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go
      macchiato strong.
    </div>
  </div>
</div>
<div className="clay-popover-left-top fade popover show">
  <div className="arrow"></div>
  <div className="inline-scroller">
    <div className="popover-header">Popover left top</div>
    <div className="popover-body">
      Viennese flavour cup eu, percolator froth ristretto mazagran caffeine.
      White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go
      macchiato strong.
    </div>
  </div>
</div>
<div className="clay-popover-left-bottom fade popover show">
  <div className="arrow"></div>
  <div className="inline-scroller">
    <div className="popover-header">Popover left bottom</div>
    <div className="popover-body">
      Viennese flavour cup eu, percolator froth ristretto mazagran caffeine.
      White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go
      macchiato strong.
    </div>
  </div>
</div>

Widths

A wider popover for more content.

Snippet

<div className="clay-popover-right-top fade popover popover-width-lg">
  <div className="arrow"></div>
  <div className="inline-scroller">
    <div className="popover-header">
      <div className="autofit-row autofit-row-center">
        <div className="autofit-col autofit-col-expand">
          <div className="autofit-section">Popover Header</div>
        </div>
        <div className="autofit-col">
          <button className="close" type="button">
            <svg
              className="lexicon-icon lexicon-icon-times"
              focusable="false"
              role="presentation"
            >
              <use xlink:href="/icons.svg#times" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div className="popover-body">
      Viennese flavour cup eu, percolator froth ristretto mazagran caffeine.
      White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go
      macchiato strong.
    </div>
  </div>
</div>

The map $popover-widths allows generating any number of popover widths. If a key starts with ., #, or % Clay will output it as is, otherwise we will prepend . to the key (e.g., .popover-width-lg). This doesn’t generate a Sass placeholder.

Snippet

$popover-widths: (
  popover-width-lg: (
    max-width: 421px
  ),
  '%popover-width-xl': (
    max-width: 560px
  ),
  '.popover-width-xl': (
    extend: '%popover-width-xl'
  ),
  '.popover-width-xxl': (
    max-width: 1000px
  )
);

Outputs:

Snippet

.popover-width-xl {
  max-width: 421px;
}

.popover-width-xl {
  max-width: 560px;
}

.popover-width-xxl {
  max-width: 1000px;
}

Variants

A different style of popover with a blue box shadow and no header divider.

Snippet

<div
  className="clay-popover-right-top popover popover-secondary popover-width-lg"
>
  <div className="arrow"></div>
  <div className="inline-scroller">
    <div className="popover-header">
      <div className="autofit-row autofit-row-center">
        <div className="autofit-col autofit-col-expand">
          <div className="autofit-section">Step 1 of 3: Customize Logo</div>
        </div>
        <div className="autofit-col">
          <button className="close" type="button">
            <svg
              className="lexicon-icon lexicon-icon-times"
              focusable="false"
              role="presentation"
            >
              <use xlink:href="/icons.svg#times" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div className="popover-body">
      Viennese flavour cup eu, percolator froth ristretto mazagran caffeine.
      White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go
      macchiato strong.
    </div>
  </div>
</div>

The map $popovers allows generating any number of popover variants. If a key starts with ., #, or % Clay will output it as is, otherwise we will prepend . to the key (e.g., .my-popover-secondary). This doesn’t generate a Sass placeholder.

Snippet

$popovers: (
  my-popover-secondary: (
    background-color: #eee,
    popover-header: (
      background-color: inherit
    )
  ),
  '%popover-dark': (
    background-color: #000,
    color: #fff,
    popover-header: (
      background-color: inherit,
      color: inherit
    ),
    popover-body: (
      color: inherit
    )
  ),
  '.popover-dark': (
    extend: '%popover-dark'
  )
);

Outputs:

Snippet

.my-popover-secondary {
  background-color: #eee;
}

.my-popover-secondary .popover-header {
  background-color: inherit;
}

.popover-dark {
  background-color: #000;
  color: #fff;
}

.popover-dark .popover-header {
  background-color: inherit;
  color: inherit;
}

.popover-dark .popover-body {
  color: inherit;
}

Edit this page on GitHub

Contributors

Matuzalém Teles, Diego Nascimento, Patrick Yeo, Krešimir Čoko, Bryce Osterhaus

Last edited May 12, 2025 at 7:56:02 PM

Table of Contents

Position
Top
Right
Bottom
Left
Widths
Popover Width Large
Popover Width Sass API
Variants
Popover Secondary
Popover Variant Sass API

Popover

Position

Top

Right

Bottom

Left

Widths

Popover Width Large

Popover Width Sass API

Variants

Popover Secondary

Popover Variant Sass API