Pistachio the front end framework and pattern library for graze.com

contents:


    Tooltips

    Tooltips are intended for use in providing a supplemental description or explanation about the action of a link or button where that meaning can not be determined from the text of the link, button, or icon alone.

    Tooltips should be used sparingly and only when they actually provide meaningful information or a compelling reason to interact with the element. You should always strive to make actions as understandable as possible without the use of tooltips where possible. Tooltip text isn't always visible, and should be supplemental info that users don't have to read but can provide extra useful information if required.

    usage notes

    • There is no JavaScript required as these tooltips work via CSS entirely.
    • On desktop tooltips appear on hover or focus.
    • On touch screens tooltips appear when the element is touched.
    • The content of the tooltip is provided by the value of the aria-label attribute on an element with the tooltip class.
    • If the tooltip class is present but the aria-label attribute is missing or empty, the tooltip will not appear.
    • Using aria-label makes these more accessible because assistive devices will read this label instead of any text inside the link or button.

    position

    By default all tooltips are positioned to the bottom of the element but it might sometimes be desireable to change this postion where elements are positioned to the far left, right or bottom of the viewport and would otherwise be cropped. Where this is the case, you can use these positioning classes.

    <button class="button button--tooltip tooltip tooltip--top-left" aria-label="class: .tooltip--top-left">
        top left
    </button>
    
    <button class="button button--tooltip tooltip tooltip--top" aria-label="class: .tooltip--top">
        top
    </button>
    
    <button class="button button--tooltip tooltip tooltip--top-right" aria-label="class: .tooltip--top-right">
        top right
    </button>
    <button class="button button--tooltip tooltip tooltip--bottom-left" aria-label="class: .tooltip--bottom-left">
        bottom left
    </button>
    
    <button class="button button--tooltip tooltip" aria-label="Default. No extra class needed.">
        bottom
    </button>
    
    <button class="button button--tooltip tooltip tooltip--bottom-right" aria-label="class: .tooltip--bottom-right">
        bottom right
    </button>

    examples

    button tooltip

    Tooltips should not be applied to a button but you should instead add a separate button specifically for the tooltip. Always strive to make your buttons as understandable as possible without using a tooltip.

    <button class="button">
        <span class="fa fa-edit"></span> make changes
    </button>
    <button class="button button--tooltip tooltip" aria-label="make changes to your next box until 2pm on 29th Sep.">
        <span class="fa fa-info-circle"></span> info
    </button>

    link tooltip

    Where you are using an icon for a link, a tooltip can be added to provide extra information.

    <ul class="margin-reset list-inline">
        <li>
            <a class="link-meta tooltip tooltip--bottom-left" href="https://www.facebook.com/grazeuk/" aria-label="like us on Facebook">
                <span class="fa fa-facebook-square fa-2x"></span>
                <span class="sr-only">like us on Facebook</span>
            </a>
        </li>
        <li>
            <a class="link-meta tooltip tooltip--bottom-left" href="https://twitter.com/grazedotcom" aria-label="follow us on Twitter">
                <span class="fa fa-twitter-square fa-2x"></span>
                <span class="sr-only">follow us on Twitter</span>
            </a>
        </li>
        <li>
            <a class="link-meta tooltip tooltip--bottom-left" href="https://www.instagram.com/grazedotcom/" aria-label="follow us on Instagram">
                <span class="fa fa-instagram fa-2x"></span>
                <span class="sr-only">follow us on Instagram</span>
            </a>
        </li>
    </ul>