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.

HTML
JSX
<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.

HTML
JSX
<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.

HTML
JSX
<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.

HTML
JSX
<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.

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

API

classDescription
tooltipBase class for tooltip
tooltip-topSet position to top
tooltip-bottomSet position to bottom
tooltip-leftSet position to left
tooltip-rightSet position to right
tooltip-primarySet primary color
tooltip-secondarySet secondary color
tooltip-successSet success color
tooltip-errorSet error color
tooltip-warningSet warning color
tooltip-openOpen tooltip by default
tooltip-clickOpen tooltip on click