Tooltips

Although simple, the tooltip component has a wide variety of uses. Below, we see a basic demonstration of the tooltip.

This is a button.

<div class="inline-block">

    <!-- Target relative to which tooltip should position itself -->
    <div class="tooltip-target margin-bottom-large">
        <button class="margin-bottom-none">Click me!</button>

        <!-- Tooltip -->
        <div class="tooltip tooltip-right-top reset-child-margins">
            <p>This is a button.</p>
        </div>
    </div>
</div>

The two elements within the markup of which users should take note are the .tooltip and the .tooltip-target. The .tooltip-target will allow the .tooltip to be positioned accordingly to the element it is placed on.

In the following notes, we will discuss the ways in which the tooltip can be configured on case-by-case basis. In particular, customization is available for tooltip positions, colors, and the use of UI pertaining to dismissability.

Tooltip Positions

Tooltips can be positioned in a number of ways, each of which is a corresonding class. This class is always constructed in the pattern .tooltip-[side]-[alignment].

The example above uses the class .tooltip-right-top, and as a result, the .tooltip component is displayed on the right of its target, and aligned to the target's top side.

Thus, if a tooltip is positioned on either the left or the right side, it can be aligned to the top or the bottom of the target. If a tooltip is positioned on either the top or the bottom target side, it can be aligned either to the left, right, or middle of the target. These configurations correspond to the following classes:

  • .tooltip-top-left
  • .tooltip-top-middle
  • .tooltip-top-right
  • .tooltip-bottom-left
  • .tooltip-bottom-middle
  • .tooltip-bottom-right
  • .tooltip-left-top
  • .tooltip-left-bottom
  • .tooltip-right-top
  • .tooltip-right-bottom

Several of these classes are demonstrated below. We've declined to show all of them solely for the sake of space.

This is a button.

This is a button.

This is a button.

<div class="row">
    <div class="columns small-6">
        <div class="inline-block">

            <!-- Tooltip example: bottom side / aligned to middle -->
            <div class="tooltip-target margin-bottom-large">
                <button class="margin-bottom-none">Click me!</button>
                <div class="tooltip tooltip-bottom-middle reset-child-margins">
                    <p>This is a button.</p>
                </div>
            </div>

        </div>
    </div>

    <div class="columns small-6">
        <div class="inline-block">

            <!-- Tooltip example: top side / aligned to left -->
            <div class="tooltip-target margin-bottom-large">
                <button class="margin-bottom-none">Click me!</button>
                <div class="tooltip tooltip-top-left reset-child-margins">
                    <p>This is a button.</p>
                </div>
            </div>

        </div>
    </div>

    <div class="columns small-6">
        <div class="inline-block">

            <!-- Tooltip example: top side / aligned to left -->
            <div class="tooltip-target margin-bottom-large">
                <button class="margin-bottom-none">Click me!</button>
                <div class="tooltip tooltip-left-bottom reset-child-margins">
                    <p>This is a button.</p>
                </div>
            </div>

        </div>
    </div>
</div>

By default, if position is unspecified, a tooltip will appear on the top-left.

This is a button.

<div class="inline-block">

    <!-- Target relative to which tooltip should position itself -->
    <div class="tooltip-target margin-bottom-large">
        <button class="margin-bottom-none">Click me!</button>

        <!-- Tooltip -->
        <div class="tooltip reset-child-margins">
            <p>This is a button.</p>
        </div>
    </div>
</div>

Sizing

Tooltips can have a variety of widths. Each of these can be applied using a class of the form .tooltip-width-[size-name].

For example:

This tooltip is bigger.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet nibh eget ligula convallis consectetur quis quis nisl. Vestibulum pretium consectetur nisi, in mattis odio aliquam id. Nam a justo a est dignissim hendrerit vitae sollicitudin lectus. In nec leo ullamcorper, ultrices felis ut, sollicitudin odio.

<div class="inline-block">
    <div class="tooltip-target margin-bottom-large">
        <button class="margin-bottom-none">Click me!</button>

        <!-- Example Large Tooltip -->
        <div class="tooltip tooltip-bottom-left tooltip-width-large reset-child-margins">
            <h3>This tooltip is bigger.</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet nibh eget ligula convallis consectetur quis quis nisl. Vestibulum pretium consectetur nisi, in mattis odio aliquam id. Nam a justo a est dignissim hendrerit vitae sollicitudin lectus. In nec leo ullamcorper, ultrices felis ut, sollicitudin odio.</p>
            <div class="text-right">
                <button class="margin-bottom-none">Primary</button>
                <button class="dull margin-bottom-none">Other</button>
            </div>
        </div>
    </div>
</div>

The following width-configurations are available.

  • tooltip-width-auto
  • tooltip-width-tiny
  • tooltip-width-small
  • tooltip-width-medium
  • tooltip-width-large
  • tooltip-width-xlarge

Tooltip Colors

Tooltips can have a variety of colors, each of which is either neutral or contextual in nature. Each of these color settings can be applied using a class of the form .tooltip-color-[color name].

For example:

This is a button.

<div class="inline-block">
    <div class="tooltip-target margin-bottom-large">
        <button class="margin-bottom-none">Click me!</button>

        <!-- Example Colored Tooltip -->
        <div class="tooltip tooltip-right-top tooltip-color-success reset-child-margins text-white">
            <p>This is a button.</p>
        </div>
    </div>
</div>

The following color classes are available:

  • tooltip-color-success
  • tooltip-color-info
  • tooltip-color-warning
  • tooltip-color-alert
  • tooltip-color-white
  • tooltip-color-dark

Show/Hide

The tooltip component comes with built-in show/hide functionality to apply desired transitions. This functionality can be harnessed in one of two ways; you may employ a CSS-only approach to show the tooltip only on hover, or you may add or remove a class with application-specific Javascript to show the tooltip as necessary.

Pure CSS

Add the .tooltip-show-on-hover class to your .tooltip-target to have your tooltip only appear on hover with no additional Javascript.

This is a button.

<div class="inline-block">

    <!-- Example tooltip shown on hover -->
    <div class="tooltip-target tooltip-show-on-hover margin-bottom-large">
        <button class="margin-bottom-none">Click me!</button>
        <div class="tooltip tooltip-right-top reset-child-margins">
            <p>This is a button.</p>
        </div>
    </div>
</div>

Manual

You may manually show/hide your tooltip by adding the .tooltip-hide class to your .tooltip element with application-specific Javascript. We demonstrate this strategy below.

This is a button.

<div class="inline-block">
    <div class="tooltip-target tooltip-js-example margin-bottom-large">
        <button class="margin-bottom-none">Click me!</button>

        <!-- Example tooltip hidden with manual class-manipulation -->
        <div class="tooltip tooltip-right-top tooltip-hide reset-child-margins">
            <p>This is a button.</p>
        </div>
    </div>
</div>

Dismissability

Should you wish to make your tooltip dismissable, simply add a <button> with class .tooltip-close to your tooltip. You may bind your desired dismissal functionality from there.

This tooltip is bigger.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet nibh eget ligula convallis consectetur quis quis nisl. Vestibulum pretium consectetur nisi, in mattis odio aliquam id. Nam a justo a est dignissim hendrerit vitae sollicitudin lectus. In nec leo ullamcorper, ultrices felis ut, sollicitudin odio.

<div class="inline-block">
    <div class="tooltip-target margin-bottom-large">
        <button class="margin-bottom-none">Click me!</button>

        <!-- Example Large Tooltip -->
        <div class="tooltip tooltip-right-top tooltip-width-large reset-child-margins">
            <button class="tooltip-close"></button>
            <h3>This tooltip is bigger.</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet nibh eget ligula convallis consectetur quis quis nisl. Vestibulum pretium consectetur nisi, in mattis odio aliquam id. Nam a justo a est dignissim hendrerit vitae sollicitudin lectus. In nec leo ullamcorper, ultrices felis ut, sollicitudin odio.</p>
            <div class="text-right">
                <button class="margin-bottom-none">Primary</button>
                <button class="dull margin-bottom-none">Other</button>
            </div>
        </div>
    </div>
</div>

Padding

Tooltips have padding by default. This padding can easily be overridden with one of the padding utility classes.

This is a button.

<div class="inline-block">

    <!-- Target relative to which tooltip should position itself -->
    <div class="tooltip-target margin-bottom-large">
        <button class="margin-bottom-none">Click me!</button>

        <!-- Tooltip -->
        <div class="tooltip tooltip-right-top tooltip-width-medium padding-xlarge reset-child-margins">
            <p>This is a button.</p>
        </div>
    </div>
</div>

Example Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Back to Version Explorer!