Cirrus

#Tooltips

Cirrus supports a CSS only tooltip that shows on hover in different directions.

#Basics

A tooltip can be added to any component you want just by sticking the tooltip class to it. Use the data-tooltip attribute to specify the tooltip content.

<div class="u-center">
    <div class="m-1">
        <button class="btn-primary tooltip" data-tooltip="Tooltip 1">Button 1</button>
    </div>
    <div class="m-1">
        <button class="btn-primary tooltip" data-tooltip="Tooltip 2">Button 2</button>
    </div>
    <div class="m-1">
        <button class="btn-primary tooltip" data-tooltip="Tooltip 3">Button 3</button>
    </div>
</div>
<div class="space"></div>
<div class="u-center">
    <label class="tooltip tooltip-bottom" data-tooltip="Hey there!">
        <input type="radio"> Hover over me</label>
    <label class="tooltip tooltip-bottom" data-tooltip="No more long captions for checkboxes">
        <input type="checkbox"> Tooltips are cool!</label>
</div>

#Directions

Show your tooltips in different directions. The direction class follows a tooltip--[direction] convention, where the direciton can be any of the ones listed below.

<div class="button-container">
    <button class="tooltip" data-tooltip="Tooltip Top (Default)">Tooltip Top</button>
</div>
<div class="btn-container">
    <button class="tooltip tooltip--top-left" data-tooltip="Tooltip Top Left">Tooltip Top Left</button>
</div>
<div class="btn-container">
    <button class="tooltip tooltip--top-right" data-tooltip="Tooltip Top Right">Tooltip Top Right</button>
</div>
<div class="btn-container">
    <button class="tooltip tooltip--bottom" data-tooltip="Tooltip Bottom">Tooltip Bottom</button>
</div>
<div class="btn-container">
    <button class="tooltip tooltip--bottom-left" data-tooltip="Tooltip Bottom Left">Tooltip Bottom Left</button>
</div>
<div class="btn-container">
    <button class="tooltip tooltip--bottom-right" data-tooltip="Tooltip Bottom Right">Tooltip Bottom Right</button>
</div>
<div class="btn-container">
    <button class="tooltip tooltip--left" data-tooltip="Tooltip Left">Tooltip Left</button>
</div>
<div class="btn-container">
    <button class="tooltip tooltip--right" data-tooltip="Tooltip Right">Tooltip Right</button>
</div>