Tooltips

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

EXAMPLE

Show Code

 
<div class="inline-block">

    <!-- Target relative to which tooltip should position itself -->
    <div class="tooltip-target">
        <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>

This is a button.

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.

EXAMPLE

Show Code

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

            <!-- Tooltip example: bottom side / aligned to middle -->
            <div class="tooltip-target">
                <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">
                <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>

This is a button.

This is a button.

This is a button.

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

EXAMPLE

Show Code

 
<div class="inline-block">

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

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

This is a button.

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:

EXAMPLE

Show Code

 
<div class="inline-block">
    <div class="tooltip-target">
        <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>

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.

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:

EXAMPLE

Show Code

 
<div class="inline-block">
    <div class="tooltip-target">
        <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>

This is a button.

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.

EXAMPLE

Show Code

 
<div class="inline-block">

    <!-- Example tooltip shown on hover -->
    <div class="tooltip-target tooltip-show-on-hover">
        <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>

This is a button.

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.

EXAMPLE

Show Code

 
<div class="inline-block">
    <div class="tooltip-target tooltip-js-example">
        <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>

This is a button.

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.

EXAMPLE

Show Code

 
<div class="inline-block">
    <div class="tooltip-target">
        <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>

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.

Padding

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

EXAMPLE

Show Code

 
<div class="inline-block">

    <!-- Target relative to which tooltip should position itself -->
    <div class="tooltip-target">
        <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>

This is a button.

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!