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.
Famous UI Tool tip is purely based on CSS, no Javascript required.
Also can make the Tool tip shown by default by adding .tooltip-active
class.
<button class="fui-btn fui-btn-primary" data-tip="Default">Default</button>
<button class="fui-btn fui-btn-primary" data-tip="right" data-tip-position="right">Right</button>
<button class="fui-btn fui-btn-primary" data-tip="bottom" data-tip-position="bottom">Bottom</button>
<button class="fui-btn fui-btn-primary" data-tip="Left" data-tip-position="left">Left</button>
<!-- ACTIVE TOOLTIP -->
<button class="fui-btn fui-btn-primary tooltip-active" data-tip="Active tool tip">Default</button>