Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Popover

To add a popover, add a data reference to the trigger with a data-popover attribute, which refers to an id. We use Popper.js. Please refer to the documentation for more information.

Base example

#
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
<div style="min-height: 20rem;">
    <button class="c-button c-button--secondary" type="button" data-popover="popover-base-example" data-popover-placement="bottom-start">
        <span class="c-button__content">
            <span class="c-button__label">
                <div class="c-button__content">
                    <div class="c-button__label">Show a popover</div>
                </div>
            </span>
        </span>
    </button>
    <div class="c-popover" id="popover-base-example" role="popover">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        <div class="c-popover__arrow" data-popper-arrow="data-popper-arrow"></div>
    </div>
</div>
div(style="min-height: 20rem;")
    +c-button({})(data-popover="popover-base-example" data-popover-placement="bottom-start")
        .c-button__content
            .c-button__label Show a popover

    .c-popover#popover-base-example(role="popover")
        | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        .c-popover__arrow(data-popper-arrow)

Placement example

# 
<div style="min-height: 25rem">
    <div class="c-toolbar">
        <div class="c-toolbar__left">
            <button class="c-button c-button--secondary" type="button" data-popover="popover-bottom-start" data-popover-placement="bottom-start">
                <span class="c-button__content">
                    <span class="c-button__label">
                        <div class="c-button__content">
                            <div class="c-button__label">Bottom Start</div>
                        </div>
                    </span>
                </span>
            </button>
            <div class="c-popover" id="popover-bottom-start" role="tooltip">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                <div class="c-popover__arrow" data-popper-arrow="data-popper-arrow"></div>
            </div>
        </div>
        <div class="c-toolbar__right">
            <button class="c-button c-button--secondary" type="button" data-popover="popover-bottom-end" data-popover-placement="bottom-end">
                <span class="c-button__content">
                    <span class="c-button__label">
                        <div class="c-button__content">
                            <div class="c-button__label">Bottom End</div>
                        </div>
                    </span>
                </span>
            </button>
            <div class="c-popover" id="popover-bottom-end" role="tooltip">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                <div class="c-popover__arrow" data-popper-arrow="data-popper-arrow"></div>
            </div>
        </div>
    </div>
</div>
div(style="min-height: 25rem")
    .c-toolbar
        .c-toolbar__left
            +c-button({})(data-popover="popover-bottom-start" data-popover-placement="bottom-start")
                .c-button__content
                    .c-button__label Bottom Start

            .c-popover#popover-bottom-start(role="tooltip")
                | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                .c-popover__arrow(data-popper-arrow)

        .c-toolbar__right
            +c-button({})(data-popover="popover-bottom-end" data-popover-placement="bottom-end")
                .c-button__content
                    .c-button__label Bottom End

            .c-popover#popover-bottom-end(role="tooltip")
                | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                .c-popover__arrow(data-popper-arrow)