Popovers

Basic stylised standard HTML popover elements with optional opening animation styles.

Examples

Popovers have light-dismiss behaviour by default so the closing button is optional.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Examples HTML 
<button popovertarget="popover">Popover</button>
<div id="popover" popover>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

<button popovertarget="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>

Transition

The transition animation style is optional and can be customized inline using the CSS variable --popover-transition.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Examples HTML

The popover animation is enabled so the 'No transition' example uses the variable to remove the default .25s transition included to demonstrate default non-animated popovers.

<button popovertarget="popover-no-transition">No transition</button>
<div id="popover-no-transition" popover style="--popover-transition: 0s;">
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

<button popovertarget="popover-transition">Enabled (default .25s)</button>
<div id="popover-transition" popover>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

<button popovertarget="popover-custom-transition">Enabled (custom 1.5s)</button>
<div id="popover-custom-transition" popover style="--popover-transition: 1.5s;">
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

Using the module

Add the sassmods.scss to your custom styles as below, use the Sass variables from the module's source code (see below) to customize the default property values if required, then include the Sass mixin anywhere below.

@use "sassmods/scss/sassmods" as *;
$popover-padding-block: 0.25rem; // example
$popover-padding-inline: 0.5rem; // example

@include popovers-css;
@includ popovers-animation-css;

Using the framework

Enable the module in the sassmods-system.scss document as below, if required customize the styles or the Sass variables for the default property values directly in the source code (see below).

$enable-popovers:           true;
$enable-popovers-animate:   true;

Source

The source code is a self-contained Sass document that compiles the style modules as Sass mixins using Sass variables provided for the core property values that can be customized as described above.

Source

Use the property specific CSS variables to create root level variables for global styles and/or editing inline, or change all the values to suit your own parameters.

// ---------------------------------------------------------- 
// Popovers
// ----------------------------------------------------------
$popover-text-color:        var(--popover-txt) !default;
$popover-margin-top:        var(--popover-mt, 1rem) !default;
$popover-padding-block:     var(--popover-py, 0.75rem) !default;
$popover-padding-inline:    var(--popover-px, 1rem) !default;
$popover-border-color:      var(--popover-bd-col, color-mix(in srgb, CanvasText 12%, Canvas)) !default;
$popover-radius:            var(--popover-radius, 0.125em) !default;
$popover-background-color:  var(--popover-bg, Canvas) !default; 
$popover-transition:        var(--popover-transition, 0.25s) !default;
$popover-backdrop:          color-mix(in srgb, black 50%, transparent) !default;

@mixin popovers-css {

:where([popover]) {
  color: #{$popover-text-color};
  block-size: fit-content;
  max-block-size: calc(100vh - 2rem);
  inline-size: calc((100% - 6px) - 2em);
  max-inline-size: var(--popover-width, fit-content);
  margin-block-start: #{$popover-margin-top};
  padding-block: #{$popover-padding-block};
  padding-inline: #{$popover-padding-inline};
  border: 1px solid #{$popover-border-color};
  border-radius: #{$popover-radius};
  background-color: #{$popover-background-color}; 
  overflow: auto;
  overscroll-behavior: contain; 
}

:where([popover]) *:last-child {
  margin-block-end: 0;
}

[popover]::backdrop {
  background-color: #{$popover-backdrop};
}

} // end popovers-css

@mixin popovers-animation-css {

@media screen and (prefers-reduced-motion: no-preference) {
  [popover] {
    transition: #{$popover-transition};
    opacity: 1; 
  }
}

@starting-style {
  [popover] {
    opacity: 0;    
  }
}

}