Tooltip

Ripple UI comes with a tooltip component that can be used to display additional information about an element.

​

Default

Simple example of a tooltip.

top

<span class="tooltip tooltip-top" data-tooltip="hello">
	<button class="btn">top</button>
</span>

​

Directions

Tooltips can be positioned in 4 directions: top, right, bottom, left.

<span class="tooltip tooltip-top" data-tooltip="Top">
	<button class="btn">top</button>
</span>

<span class="tooltip tooltip-bottom" data-tooltip="Bottom">
	<button class="btn">bottom</button>
</span>

<span class="tooltip tooltip-left" data-tooltip="Left">
	<button class="btn">left</button>
</span>
<span class="tooltip tooltip-right" data-tooltip="Right">
	<button class="btn">right</button>
</span>

​

Colors

Tooltips can be styled with different colors.

<span class="tooltip tooltip-top tooltip-primary" data-tooltip="Top">
	<button class="btn">primary</button>
</span>

<span class="tooltip tooltip-top tooltip-secondary" data-tooltip="Bottom">
	<button class="btn">secondary</button>
</span>

<span class="tooltip tooltip-top tooltip-success" data-tooltip="Left">
	<button class="btn">success</button>
</span>

<span class="tooltip tooltip-top tooltip-error" data-tooltip="Right">
	<button class="btn">error</button>
</span>

<span class="tooltip tooltip-top tooltip-warning" data-tooltip="Top">
	<button class="btn">warning</button>
</span>

​

Open

Tooltips can be opened by default.

primary

<span class="tooltip tooltip-top tooltip-primary tooltip-open" data-tooltip="Top">
	<button class="btn">primary</button>
</span>

​

On Click

Tooltips can be opened on click.

On Click

<span class="tooltip-click tooltip-top" data-tooltip="On Click">
	<button class="btn">On Click</button>
</span>

​

API