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>