Popover

On this page we will go through our Popover component

This component should be easy to integrate in our implementations.

Overview

Global Definition

Each Popover component is based on a global CSS class called “msds-popover”. It is important to include it first as it is the main CSS class. Without it, the UI of the component won’t work.

<div class="d-inline-block msds-popover">
    <div class="msds-text-header-1-bold msds-text-clear-blue mb-3">
        Invite a coworker
    </div>
    <div class="msds-text-body-2 msds-text-gray-9 mb-3">
       Regular popover, the default behavior is right positioned
    </div>
    <div class="msds-popover__item msds-text-gray-10">
        <div class="msds-popover__content">
            <div class="msds-popover__header mb-4">
                <svg title="icon" class="msds-icon msds-text-alt-blue-1">
                    <use href="../../../msds-spritemap.svg#colleague" />
                </svg>
                <div class="ml-2">
                    Invite a coworker
                </div>
            </div>
            <div class="msds-popover__description mb-1">
                <p class="mb-2">
                    Contact one of the below co-workers for permission to add more colleagues.
                </p>
                <p class="mb-2">John Doe</p>
                <p class="mb-2">Jane Doe</p>
                <p class="mb-2">Janie Doe</p>
                <p class="mb-2">Johnny Doe</p>
                <p class="mb-2">John Roe</p>
                <p class="mb-2">Richard Roe</p>
            </div>
        </div>
        <div class="msds-popover__arrow">
        </div>
    </div>
</div>

Popover positioning

The Popover element can be positioned on top, left, right or on the bottom its hover element by extenting the class with its corrosponding extending class. msds-popover–top, msds-popover–left, msds-popover–right, msds-popover–bottom.

<div class="d-inline-block msds-popover msds-popover--top">
    <div class="msds-text-header-1-bold msds-text-clear-blue mb-3">
        Invite a coworker
    </div>
    <div class="msds-text-body-2 msds-text-gray-9 mb-3">
        popover top
    </div>
    <div class="msds-popover__item msds-text-gray-10">
        <div class="msds-popover__content">
            <div class="msds-popover__header mb-4">
                <svg title="icon" class="msds-icon msds-text-alt-blue-1">
                    <use href="../../../msds-spritemap.svg#colleague" />
                </svg>
                <div class="ml-2">
                    Invite a coworker
                </div>
            </div>
            <div class="msds-popover__description mb-1">
                <p class="mb-2">
                    Contact one of the below co-workers for permission to add more colleagues.
                </p>
                <p class="mb-2">John Doe</p>
                <p class="mb-2">Jane Doe</p>
                <p class="mb-2">Janie Doe</p>
                <p class="mb-2">Johnny Doe</p>
                <p class="mb-2">John Roe</p>
                <p class="mb-2">Richard Roe</p>
            </div>
        </div>
        <div class="msds-popover__arrow">
        </div>
    </div>
</div>

<div class="d-inline-block msds-popover msds-popover--left">
    <div class="msds-text-header-1-bold msds-text-clear-blue mb-3">
        Invite a coworker
    </div>
    <div class="msds-text-body-2 msds-text-gray-9 mb-3">
        popover left
    </div>
    <div class="msds-popover__item msds-text-gray-10">
        <div class="msds-popover__content">
            <div class="msds-popover__header mb-4">
                <svg title="icon" class="msds-icon msds-text-alt-blue-1">
                    <use href="../../../msds-spritemap.svg#colleague" />
                </svg>
                <div class="ml-2">
                    Invite a coworker
                </div>
            </div>
            <div class="msds-popover__description mb-1">
                <p class="mb-2">
                    Contact one of the below co-workers for permission to add more colleagues.
                </p>
                <p class="mb-2">John Doe</p>
                <p class="mb-2">Jane Doe</p>
                <p class="mb-2">Janie Doe</p>
                <p class="mb-2">Johnny Doe</p>
                <p class="mb-2">John Roe</p>
                <p class="mb-2">Richard Roe</p>
            </div>
        </div>
        <div class="msds-popover__arrow">
        </div>
    </div>
</div>

<div class="d-inline-block msds-popover msds-popover--bottom">
    <div class="msds-text-header-1-bold msds-text-clear-blue mb-3">
        Invite a coworker
    </div>
    <div class="msds-text-body-2 msds-text-gray-9 mb-3">
        popover bottom
    </div>
    <div class="msds-popover__item msds-text-gray-10">
        <div class="msds-popover__content">
            <div class="msds-popover__header mb-4">
                <svg title="icon" class="msds-icon msds-text-alt-blue-1">
                    <use href="../../../msds-spritemap.svg#colleague" />
                </svg>
                <div class="ml-2">
                    Invite a coworker
                </div>
            </div>
            <div class="msds-popover__description mb-1">
                <p class="mb-2">
                    Contact one of the below co-workers for permission to add more colleagues.
                </p>
                <p class="mb-2">John Doe</p>
                <p class="mb-2">Jane Doe</p>
                <p class="mb-2">Janie Doe</p>
                <p class="mb-2">Johnny Doe</p>
                <p class="mb-2">John Roe</p>
                <p class="mb-2">Richard Roe</p>
            </div>
        </div>
        <div class="msds-popover__arrow">
        </div>
    </div>
</div>