Commentary

Popovers are small containers that often contain additional information or allow a user to interact with secondary content / calls to action.

The aside HTML element is used as a semantic container as it represents a portion of a document whose content is only indirectly related to the document's main content.

Note: Mobile / touch devices do not respond to a :hover user action. Mobile / touch devices do respond to event that can use javascript to emulate a hover user action.

Usage

Classes:
.popover Defines the class for the aside content container that has a button and uses :hover to activate the hidden content.
.pop-right, .pop-left, .pop-bottom Define the callout position. By default, the popovers appear above the element.
.popover-container Defines the hidden container of content that will appear on :hover or :focus user action. The container can be any content that a user can read or a component that a user can interact with such as a card with links.
Dependencies:
File: popover.css
Variables: --bg-main-comp, --mar-horz, --mar-vert, --pad-horz, --radius, --shadow

Examples

Basic Popovers with Different Buttons

<aside class="popover">
    <button type="button" class="is-primary">popover (top default)</button>
    <div class="popover-container">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi,
            tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
        </p>
    </div>
</aside>

<aside class="popover pop-right">
    <button type="button" class="is-secondary">.popover .popover-right</button>
    <div class="popover-container">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi,
            tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
        </p>
    </div>
</aside>

<aside class="popover pop-bottom">
    <button type="button" class="is-info">.popover .popover-bottom</button>
    <div class="popover-container">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi,
            tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
        </p>
    </div>
</aside>

<aside class="popover pop-left">
    <button type="button" class="is-link">.popover .popover-left</button>
    <div class="popover-container">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi,
            tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
        </p>
    </div>
</aside>

Popover Wrapping Another Component

<aside class="popover pop-right">
    <button type="button" class="is-primary">.popover with card</button>
    <div class="popover-container">
        <article class="card">
            <figure class="card-image">
                <img class="has-aspect-3x1" src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/main2.jpg" alt="Main2 scene">
            </figure>

            <header class="card-header">
                <h2 class="card-header-title">
                    Card Title
                </h2>
            </header>

            <div class="card-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi,
                    tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
                </p>
            </div>

            <footer class="card-footer">
                <button class="is-primary has-hover">Save;</button>
                <button class="is-secondary-outlined has-hover">Edit</button>
                <button class="is-danger-outlined has-hover">Delete;</button>
            </footer>
        </article>
    </div>
</aside>