Popover

This component make able to crate box on flyout as Tooltip or Dropdown menu.

@use '@natachah/vanilla-frontend/scss/components/popover';

Syntax

The popover is using a <div> tag with the class .popover. Inside of the element you must add a <button> and another <div> or an <ul/ol> tag.

html

<div class="popover">
    <button popovertarget="myPopover">⚓︎ Open the popover</button>
    <div popover id="myPopover">
        <p>Hello world</p>
    </div>
</div>

css properties

--popover-color
--popover-background
--popover-border-size
--popover-border-style
--popover-border-color
--popover-border-radius
--popover-padding-inline
--popover-padding-block
--popover-transition
--popover-decoration
--popover-area
--popover-inset

To work properly the <button> of the dropdown must have an popovertarget="IdOfTheContent" attribute. And the target (=the flyout box) must have popover attribute.

Tooltip

You can create basic tooltip in text, juste make sute to use valid HTML as <span>. To position the tooltip, use the CSS custom properties --popover-area and --popover-inset.

<p>
    Anchor in a text
    <span class="popover" style="--popover-area: center right;--popover-inset: auto;">
        <button popovertarget="myTooltip">⚓︎</button>
        <span popover id="myTooltip" data-placement="left">
            Hello world
        </span>
    </span>
</p>

Dropdown menu

The Popover component make it able to create some dropdown menu without Javascript ! You must add the class .dropdownand not .popover. It use the mixin as-list to create a nice menu and add some CSS custom properties.

html

<div class="dropdown">
    <button popovertarget="myDropdown">
        Open my dropdown
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>
    </button>
    <ul popover id="myDropdown">
        <li><a href="#">Subitem</a></li>
        <li><a href="#">Subitem</a></li>
        <li><a href="#">Subitem</a></li>
    </ul>
</div>

css properties

--dropdown-color
--dropdown-background
--dropdown-border-size
--dropdown-border-style
--dropdown-border-color
--dropdown-border-radius
--dropdown-padding-inline
--dropdown-padding-block
--dropdown-transition
--dropdown-decoration
--dropdown-outline-size
--dropdown-outline-style
--dropdown-outline-color
--dropdown-outline-offset
--dropdown-hover-color
--dropdown-hover-background
--dropdown-hover-border-color
--dropdown-focus-color
--dropdown-focus-background
--dropdown-focus-border-color
--dropdown-active-color
--dropdown-active-background
--dropdown-active-border-color
--dropdown-disabled-opacity
--dropdown-transition
--dropdown-svg-transform

Variants

Color

You can create some color variation by including the colors classes name into the import and then by adding the class as .{COLOR}.

html

<div class="popover">
    <button popovertarget="myPopoverPrimary">⚓︎ Open the popover</button>
    <div popover id="myPopoverPrimary" class="primary">
        <p>Hello world</p>
        <p>This is a primary popover !</p>
    </div>
</div>

scss

@use "@natachah/vanilla-frontend/scss/components/popover" with (
    $colors: ('primary')
);

Group

You can group some dropdowns by putting them in a <div> with the class .group.

html

<div class="group">
    <div class="dropdown">
        <button popovertarget="dropdownA">
            Dropdown A
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>
        </button>
        <ul popover id="dropdownA">
            <li><a href="#">Subitem A</a></li>
            <li><a href="#">Subitem A</a></li>
            <li><a href="#">Subitem A</a></li>
        </ul>
    </div>
    <div class="dropdown">
        <button popovertarget="dropdownB">
            Dropdown B
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>
        </button>
        <ul popover id="dropdownB">
            <li><a href="#">Subitem B</a></li>
            <li><a href="#">Subitem B</a></li>
            <li><a href="#">Subitem B</a></li>
        </ul>
    </div>
    <div class="dropdown">
        <button popovertarget="dropdownC">
            Dropdown C
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>
        </button>
        <ul popover id="dropdownC">
            <li><a href="#">Subitem C </a></li>
            <li><a href="#">Subitem C </a></li>
            <li><a href="#">Subitem C </a></li>
        </ul>
    </div>
</div>

scss

@use '@natachah/vanilla-frontend/scss/components/group';