Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Tooltip

Tooltip right

# 
<button class="c-button c-button--secondary" type="button" data-tooltip="tooltip-1" data-tooltip-placement="right">
    <span class="c-button__content">
        <span class="c-button__label">Trigger a tooltip - Right</span>
    </span>
</button>
<div class="c-tooltip" id="tooltip-1" role="tooltip">This is a tooltip
    <div class="c-tooltip__arrow" data-popper-arrow="data-popper-arrow"></div>
</div>
+c-button({})(data-tooltip="tooltip-1" data-tooltip-placement="right") Trigger a tooltip - Right
.c-tooltip#tooltip-1(role="tooltip")
    | This is a tooltip
    .c-tooltip__arrow(data-popper-arrow)

Tooltip left

# 
<div class="c-toolbar">
    <div class="c-toolbar__right">
        <button class="c-button c-button--secondary" type="button" data-tooltip="tooltip-2" data-tooltip-placement="left">
            <span class="c-button__content">
                <span class="c-button__label">Trigger a tooltip - Left</span>
            </span>
        </button>
        <div class="c-tooltip" id="tooltip-2" role="tooltip">This is a tooltip
            <div class="c-tooltip__arrow" data-popper-arrow="data-popper-arrow"></div>
        </div>
    </div>
</div>
.c-toolbar
    .c-toolbar__right
        +c-button({})(data-tooltip="tooltip-2" data-tooltip-placement="left") Trigger a tooltip - Left
        .c-tooltip#tooltip-2(role="tooltip")
            | This is a tooltip
            .c-tooltip__arrow(data-popper-arrow)

Tooltip top

# 
<div style="padding-top: 3.2rem;">
    <button class="c-button c-button--secondary" type="button" data-tooltip="tooltip-3" data-tooltip-placement="top">
        <span class="c-button__content">
            <span class="c-button__label">Trigger a tooltip - Top</span>
        </span>
    </button>
    <div class="c-tooltip" id="tooltip-3" role="tooltip">This is a tooltip
        <div class="c-tooltip__arrow" data-popper-arrow="data-popper-arrow"></div>
    </div>
</div>
div(style="padding-top: 3.2rem;")
    +c-button({})(data-tooltip="tooltip-3" data-tooltip-placement="top") Trigger a tooltip - Top
    .c-tooltip#tooltip-3(role="tooltip")
        | This is a tooltip
        .c-tooltip__arrow(data-popper-arrow)

Tooltip bottom

# 
<div style="padding-bottom: 3.2rem;">
    <button class="c-button c-button--secondary" type="button" data-tooltip="tooltip-4" data-tooltip-placement="bottom">
        <span class="c-button__content">
            <span class="c-button__label">Trigger a tooltip - Bottom</span>
        </span>
    </button>
    <div class="c-tooltip" id="tooltip-4" role="tooltip">This is a tooltip
        <div class="c-tooltip__arrow" data-popper-arrow="data-popper-arrow"></div>
    </div>
</div>
div(style="padding-bottom: 3.2rem;")
    +c-button({})(data-tooltip="tooltip-4" data-tooltip-placement="bottom") Trigger a tooltip - Bottom
    .c-tooltip#tooltip-4(role="tooltip")
        | This is a tooltip
        .c-tooltip__arrow(data-popper-arrow)