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)

Tooltip icon

# 
<div style="padding-bottom: 3.2rem;">
    <span class="c-tooltip-icon" data-tooltip="tooltip-5" data-tooltip-placement="top">
        <div class="o-svg-icon o-svg-icon-circle-help  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4ZM2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22C6.477 22 2 17.523 2 12Z" fill="#595959" />
                <path d="M12 14C11.7348 14 11.4804 13.8946 11.2929 13.7071C11.1054 13.5196 11 13.2652 11 13V12C11 11.7348 11.1054 11.4804 11.2929 11.2929C11.4804 11.1054 11.7348 11 12 11C12.2652 11 12.5196 11.1054 12.7071 11.2929C12.8946 11.4804 13 11.7348 13 12V13C13 13.2652 12.8946 13.5196 12.7071 13.7071C12.5196 13.8946 12.2652 14 12 14ZM10.5 16.5C10.5 16.1022 10.658 15.7206 10.9393 15.4393C11.2206 15.158 11.6022 15 12 15C12.3978 15 12.7794 15.158 13.0607 15.4393C13.342 15.7206 13.5 16.1022 13.5 16.5C13.5 16.8978 13.342 17.2794 13.0607 17.5607C12.7794 17.842 12.3978 18 12 18C11.6022 18 11.2206 17.842 10.9393 17.5607C10.658 17.2794 10.5 16.8978 10.5 16.5Z" fill="#595959" />
                <path d="M12.3899 7.811C11.4329 7.766 10.6299 8.301 10.4859 9.164C10.4356 9.41907 10.2878 9.6445 10.0741 9.79249C9.86029 9.94047 9.59729 9.99938 9.34081 9.95672C9.08434 9.91406 8.85456 9.77319 8.7002 9.56397C8.54584 9.35476 8.47903 9.09364 8.51394 8.836C8.86994 6.7 10.8169 5.734 12.4849 5.814C13.3389 5.854 14.2179 6.161 14.8939 6.793C15.5869 7.44 15.9999 8.368 15.9999 9.5C15.9999 10.791 15.4919 11.749 14.6169 12.332C13.8139 12.867 12.8289 13 11.9999 13C11.7347 13 11.4804 12.8946 11.2928 12.7071C11.1053 12.5196 10.9999 12.2652 10.9999 12C10.9999 11.7348 11.1053 11.4804 11.2928 11.2929C11.4804 11.1054 11.7347 11 11.9999 11C12.6699 11 13.1859 10.883 13.5079 10.668C13.7579 10.501 13.9999 10.208 13.9999 9.5C13.9999 8.882 13.7879 8.497 13.5279 8.254C13.2509 7.995 12.8479 7.834 12.3899 7.811Z" fill="#595959" />
            </svg>
        </div>
    </span>
    <div class="c-tooltip" id="tooltip-5" role="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <div class="c-tooltip__arrow" data-popper-arrow="data-popper-arrow"></div>
    </div>
</div>
div(style="padding-bottom: 3.2rem;")
    span(class="c-tooltip-icon" data-tooltip="tooltip-5" data-tooltip-placement="top")
        +icon('circle-help')
    .c-tooltip#tooltip-5(role="tooltip")
        | Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        .c-tooltip__arrow(data-popper-arrow)

Tooltip icon in a form

# 
<div style="padding-bottom: 3.2rem;">
    <div class="o-form-group-layout o-form-group-layout--standard">
        <div class="o-form-group">
            <label class="o-form-group__label o-form-group__label--with-helper" for="defaultFormNameId">Name<span class="c-tooltip-icon" data-tooltip="tooltip-6" data-tooltip-placement="top">
                    <div class="o-svg-icon o-svg-icon-circle-help  ">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4ZM2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22C6.477 22 2 17.523 2 12Z" fill="#595959" />
                            <path d="M12 14C11.7348 14 11.4804 13.8946 11.2929 13.7071C11.1054 13.5196 11 13.2652 11 13V12C11 11.7348 11.1054 11.4804 11.2929 11.2929C11.4804 11.1054 11.7348 11 12 11C12.2652 11 12.5196 11.1054 12.7071 11.2929C12.8946 11.4804 13 11.7348 13 12V13C13 13.2652 12.8946 13.5196 12.7071 13.7071C12.5196 13.8946 12.2652 14 12 14ZM10.5 16.5C10.5 16.1022 10.658 15.7206 10.9393 15.4393C11.2206 15.158 11.6022 15 12 15C12.3978 15 12.7794 15.158 13.0607 15.4393C13.342 15.7206 13.5 16.1022 13.5 16.5C13.5 16.8978 13.342 17.2794 13.0607 17.5607C12.7794 17.842 12.3978 18 12 18C11.6022 18 11.2206 17.842 10.9393 17.5607C10.658 17.2794 10.5 16.8978 10.5 16.5Z" fill="#595959" />
                            <path d="M12.3899 7.811C11.4329 7.766 10.6299 8.301 10.4859 9.164C10.4356 9.41907 10.2878 9.6445 10.0741 9.79249C9.86029 9.94047 9.59729 9.99938 9.34081 9.95672C9.08434 9.91406 8.85456 9.77319 8.7002 9.56397C8.54584 9.35476 8.47903 9.09364 8.51394 8.836C8.86994 6.7 10.8169 5.734 12.4849 5.814C13.3389 5.854 14.2179 6.161 14.8939 6.793C15.5869 7.44 15.9999 8.368 15.9999 9.5C15.9999 10.791 15.4919 11.749 14.6169 12.332C13.8139 12.867 12.8289 13 11.9999 13C11.7347 13 11.4804 12.8946 11.2928 12.7071C11.1053 12.5196 10.9999 12.2652 10.9999 12C10.9999 11.7348 11.1053 11.4804 11.2928 11.2929C11.4804 11.1054 11.7347 11 11.9999 11C12.6699 11 13.1859 10.883 13.5079 10.668C13.7579 10.501 13.9999 10.208 13.9999 9.5C13.9999 8.882 13.7879 8.497 13.5279 8.254C13.2509 7.995 12.8479 7.834 12.3899 7.811Z" fill="#595959" />
                        </svg>
                    </div>
                </span>
            </label>
            <div class="c-tooltip" id="tooltip-6" role="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                <div class="c-tooltip__arrow" data-popper-arrow="data-popper-arrow"></div>
            </div>
            <div class="o-form-group__controls">
                <input class="c-input" type="email" value="John Doe" id="defaultFormNameId" />
            </div>
        </div>
    </div>
</div>
div(style="padding-bottom: 3.2rem;")
    .o-form-group-layout.o-form-group-layout--standard
        .o-form-group
            label.o-form-group__label.o-form-group__label--with-helper(for="defaultFormNameId")
                | Name
                span(class="c-tooltip-icon" data-tooltip="tooltip-6" data-tooltip-placement="top")
                    +icon('circle-help')
            .c-tooltip#tooltip-6(role="tooltip")
                | Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                .c-tooltip__arrow(data-popper-arrow)
            .o-form-group__controls
                input.c-input(type="email" value="John Doe" id="defaultFormNameId")