tool-tips

Intro

Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can use a tooltip to give people clarification on its function.

Add the data-tip attribute to your element and put the text inside it, also if needed can set position using data-tip-position attribute add either top, bottom, left, right on data-tip-position to control the position.

Butter Cake Tool tip is purely based on CSS, no Javascript required.

Active Tool Tip

Also can make the Tool tip shown by default by adding .tooltip-active class.

<button class="btn primary" data-tip="Default">Default</button>
<button class="btn primary" data-tip="right" data-tip-position="right">Right</button>
<button class="btn primary" data-tip="bottom" data-tip-position="bottom">Bottom</button>
<button class="btn primary" data-tip="Left" data-tip-position="left">Left</button>

<!-- ACTIVE TOOLTIP -->
<button class="btn primary tooltip-active" data-tip="Active tool tip">Default</button>