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 default popover property values can be customized in the properties.scss document. The styles can be customized in the _popovers.scss document in the [styles/components] directory, they're written as standard CSS with limited Sass functionality included for compiling purposes.

Properties

$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.188rem !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;

Styles

// ---------------------------------------------------------- 
// Popovers
// ----------------------------------------------------------
@use "../../configuration" as *;

@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;
}

.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);
}


@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)