Popovers

Customizable HTML popovers are styled to provide design continuity with other Themalize styles and utilities. Disabled by default, enable with $enable-popovers: true; in the configuration.scss document.

Close buttons can be included with popovers if required.

The quick brown fox jumps over the lazy dog.

Example HTML

The [aria-controls] is included to associate the button with the popover for accessibility and doesn't affect the functionality of the popover.

<button popovertarget="pop" aria-controls="pop">Default</button>
<div id="pop" popover>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

<button popovertarget="pop-close" aria-controls="pop-close">With close button</button>
<div id="pop-close" popover>
  <p>The quick brown fox jumps over the lazy dog.</p>
<button popovertarget="pop-close" popovertargetaction="hide">Close</button>
</div>

Colors (anchor)

The color modifier classes only apply color to the popover but if required the button color modifiers (if enabled) can be used to colorize the buttons.

With $enable-theme-colors: true;

The quick brown fox jumps over the lazy dog.

Example HTML

<button popovertarget="pop-light" aria-controls="pop-light">Light</button>
<div id="pop-light" class="pop-light" popover>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

<button popovertarget="pop-dark" aria-controls="pop-dark">Dark</button>
<div id="pop-dark" class="pop-dark" popover>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

With $enable-primary-colors: true;

The quick brown fox jumps over the lazy dog.

Example HTML

<button popovertarget="pop-blue" aria-controls="pop-blue">Blue</button>
<div id="pop-blue" class="pop-blue" popover>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

<button popovertarget="pop-red" aria-controls="pop-red">Red</button>
<div id="pop-red" class="pop-red" popover>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

<button popovertarget="pop-green" aria-controls="pop-green">Green</button>
<div id="pop-green" class="pop-green" popover>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

<button popovertarget="pop-orange" aria-controls="pop-orange">Orange</button>
<div id="pop-orange" class="pop-orange" popover>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

<button popovertarget="pop-cyan" aria-controls="pop-cyan">Cyan</button>
<div id="pop-cyan" class="pop-cyan" popover>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

Customize (anchor)

The popover core property values are provided as CSS variables that can be used to customize the styles inline. The values are compiled from Sass variables that can be customized in the properties.scss document when compiling.

Property values

$pop-txt:             var(--text) !default;
$pop-bg:              var(--body-bg) !default;
$pop-bd-color:        var(--surf-3) !default;
$pop-bd-width:        1px !default;
$pop-radius:          0.125rem !default;
$pop-my:              1rem !default;
$pop-mx:              auto !default;
$pop-py:              0.75rem !default;
$pop-px:              1rem !default;
$pop-width:           calc((100% - 6px) - 2em) !default;
$pop-max-width:       fit-content !default;

The popover styles can be customized in the _popover.scss document within the [styles/components] directory. The Sass @if rules control compiling depending on settings in the configuration.scss document.

Styles

@if $enable-popovers {

:where([popover]) {
  @if $enable-icon-mixins or $enable-icon-styles {
  --ico: var(--pop-txt);
  }
  width: var(--pop-width);
  max-inline-size: var(--pop-max-width); 
  height: fit-content;
  color: var(--pop-txt);
  background-color: var(--pop-bg);
  margin-block: var(--pop-my);
  margin-inline: var(--pop-mx);
  padding-block: var(--pop-py);
  padding-inline: var(--pop-px);
  border-width: var(--pop-bd-width);
  border-color: var(--pop-bd-color);
  border-radius: var(--pop-radius);   
  overflow: auto;
}

:where([popover] *:last-child) {
   --mb: 0;
}

@if $enable-theme-colors {

.pop-dark {
  --pop-txt: #fff;
  --pop-bg: var(--body-bg-dark);
  --pop-bd-color: var(--surf-3-dark);
}

.pop-light {
  --pop-txt: #000;
  --pop-bg: var(--body-bg-light);
  --pop-bd-color: var(--surf-2-light);
}

} // END [if/theme-colors]

@if $enable-primary-colors {

.pop-blue {
  --pop-txt: #fff;
  --pop-bg: var(--blue);
  --pop-bd-color: var(--blue);
}

.pop-red {
  --pop-txt: #fff;
  --pop-bg: var(--red);
  --pop-bd-color: var(--red);
}

.pop-green {
  --pop-txt: #fff;
  --pop-bg: var(--green);
  --pop-bd-color: var(--green);
}

.pop-orange {
  --pop-txt: #000;
  --pop-bg: var(--orange);
  --pop-bd-color: var(--orange);
}

.pop-cyan {
  --pop-txt: #000;
  --pop-bg: var(--cyan);
  --pop-bd-color: var(--cyan);
}

} // END [if/primary-colors]

} // END [@if/popovers]

Popovers

Default popover (anchor)

Colors (anchor)

Customize (anchor)