Tool Tips


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.

Active Tool Tip

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>