Jump To:

  1. Demos
    1. Basic Popover
    2. Popover with Footer
    3. Tooltip Modifier
  2. Variables
    1. $config
  3. Mixins
    1. set()
    2. styles()
  4. Functions
    1. get()

Demos

Basic Popover

A standard popover that appears near a trigger element, including a pointer arrow.

This is the content of the popover. It can contain text, links, or other small UI elements.

HTML 
<div style="padding: 4rem 0;">
  <button class="button" data-ulu-popover-trigger>Toggle Popover</button>
  <div class="popover" data-ulu-popover-content>
    <div class="popover__inner">
      <p>This is the content of the popover. It can contain text, links, or other small UI elements.</p>
    </div>
    <span class="popover__arrow" data-ulu-popover-arrow></span>
  </div>
</div>

Using the `popover__footer` element to add actions or metadata at the bottom.

Options
  • Notification Settings
  • Privacy Controls
Learn More
HTML 
<div style="padding: 4rem 0;">
  <button class="button" data-ulu-popover-trigger>Open Menu</button>
  <div class="popover" data-ulu-popover-content>
    <div class="popover__header">Options</div>
    <div class="popover__inner">
      <ul class="list-lines list-lines--dense">
        <li>Notification Settings</li>
        <li>Privacy Controls</li>
      </ul>
    </div>
    <div class="popover__footer">
      <a href="#" class="type-small">Learn More</a>
    </div>
    <span class="popover__arrow" data-ulu-popover-arrow></span>
  </div>
</div>

Tooltip Modifier

The `popover--tooltip` modifier creates a smaller, non-interactive overlay typically used for labels.

Helpful hint about this action
HTML 
<div style="padding: 2rem 0;">
  <button class="button" data-ulu-popover-trigger='{ "floating": { "placement": "top" }, "trigger": "hover" }'>Hover Me</button>
  <div class="popover popover--tooltip" data-ulu-popover-content>
    <div class="popover__inner">
      Helpful hint about this action
    </div>
    <span class="popover__arrow" data-ulu-popover-arrow></span>
  </div>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "arrow-size"                   : 16px,
  "arrow-box-shadow"             : true,
  "arrow-box-shadow-extent"      : null,
  "background-color"             : white,
  "border-radius"                : 6px,
  "color"                        : inherit,
  "max-width"                    : 90vw,
  "max-height"                   : 25rem,
  "padding"                      : 1rem,
  "padding-large"                : 2rem,
  "type-size"                    : null,
  "z-index"                      : true,
  "box-shadow"                   : true,
  "header-background-color"      : #ccc,
  "header-color"                 : null,
  "header-media-background-color": black,
  "header-padding-y"             : 0.25rem,
  "footer-border-top"            : 1px solid #dfdfdf,  
  "footer-background-color"      : #ccc,
  "footer-color"                 : null,
  "footer-padding-y"             : 0.25rem,
  "footer-padding-y-large"       : 0.5rem,
  "tooltip-background-color"     : white,
  "tooltip-color"                : null,
  "tooltip-max-width"            : 20rem,
  "tooltip-padding"              : 0.5rem,
  "tooltip-width"                : auto,
  "width"                        : 15rem,
  "width-large"                  : 30rem,
  "width-large-x"                : 50rem
  );
File Information
  • File: _popover.scss
  • Group: popover
  • Type: variable
  • Lines (comments): 31-62
  • Lines (code): 64-95

Map Properties

Name Type Default Description
arrow-size Dimension 16px Size of the dropdown arrow.
arrow-box-shadow Boolean true When true the arrow will get the popover's box shadow. Note if the box shadow is not a list (for example custom property), the mask won't be calculated from the box-shadow (use arrow-box-shadow-extent to specify manually)
arrow-box-shadow-extent Number null If set will determine the amount of overlap added to the arrow mask, else it's calculated automatically by the box-shadow option (can be used if box-shadow is custom property)
background-color Color white Background color of the popover.
border-radius Dimension 6px Border radius of the popover.
color Color inherit Text color of the popover.
max-width Dimension 90vw Max width of the popover.
max-height Dimension 25rem Max height of the popover.
padding Dimension 1rem Padding of the popover.
padding-large Dimension 2rem Padding of the popover if using "--large" or "--large-x" styling.
type-size Dimension null Font size of the popover.
z-index Number true z-index of the popover.
box-shadow CssValue true Box shadow of the popover.
header-background-color Color #ccc Background color of the popover header
header-color Color null Text color for the header.
header-media-background-color Color black background color for header media.
header-padding-y Dimension 0.25rem Vertical padding of the header.
footer-background-color Color #ccc Background color of the footer.
footer-border-top Color 1px solid #dfdfdf Optional border used to separate the content from footer
footer-color Color null Text color of the footer.
footer-padding-y Dimension 0.25rem Vertical padding of the footer.
footer-padding-y-large Dimension 0.5rem Vertical padding of the footer if using "--large" or "--large-x" styling.
tooltip-background-color Color white Background color of the tooltip.
tooltip-color Color null Font color of the tooltip.
tooltip-max-width Dimension 20rem Max width of the tooltip.
tooltip-padding Dimension 0.5rem Padding of the tooltip.
tooltip-width Dimension auto Width of the tooltip.
width Dimension 15rem Width of the popover.
width-large Dimension 30rem Width of the popover if using "--large".
width-large-x Dimension 50rem Width of the popover if using "--large-x".

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _popover.scss
  • Group: popover
  • Type: mixin
  • Lines (comments): 97-100
  • Lines (code): 102-104

Examples

@include ulu.component-popover-set(( "property" : value ));

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Prints component styles

File Information
  • File: _popover.scss
  • Group: popover
  • Type: mixin
  • Lines (comments): 116-118
  • Lines (code): 120-240

Examples

@include ulu.component-popover-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _popover.scss
  • Group: popover
  • Type: function
  • Lines (comments): 106-109
  • Lines (code): 111-114

Examples

@include ulu.component-popover-get("property");

Parameters

Name Type Description
$name Map Name of property

Require