Components

Tooltip

Tooltip is a floating, non-actionable label used to explain a user interface element or feature.

Requires JS

Note that this component requires use our javascript file to works, else you can skip this message if you are already using Perfect UI as a package.

Basic

Tooltip are meant to be exactly that, a hint or tip on what a tool or other interaction does. They are meant to clarify or help you use the content that they hover over, not add additional content:

To create a tooltip, simply add the `.tooltip` class.

Provide the tooltip text through the `tooltip` attribute.

Attention needed

The `.tooltip` class uses pseudo elements `::before` and `::after` to works.

Make sure you use it with an element that does not use pseudo classes as well.

Directions

The tooltip has the top direction by default, but you can also use `.tooltip-right`, `.tooltip-left` and `.tooltip-bottom` directions.

White/Black tooltips

The tooltip has `.tooltip-white` class by default, but if you want use the black style, simply use the `.btn-black` class.

Simple usage

Tooltip are typically only visible on hover, for that reason if you need to be able to read the content while interacting with other parts of the page then a tooltip will not work.

Christopher Gonçalves
christopher@gmail.com
Amanda Ketellyn
amanda@gmail.com