Tooltips

How To Use

Add a label, input then p with class .bf-info-tooltip and data-tooltip attribute. Specify the text you want in the data-tooltip attribute.

The tooltips also work on mobile via the user clicking/tapping on them.

					
<form>
  <label>Username</label>
  <input type="text" />
  <p class="bf-info-tooltip" data-tooltip="6 letters minimum">?</p>
</form>

Options

Text/icon

You can change the text within the p tag to whatever feels best, even an icon! We find a question mark works best.

Direction

You can change the direction of the tooltip. By default, the toolitp will appear below the element. Use the following classes to change its direction:

.bf-tooltip-right
.bf-tooltip-left
.bf-tooltip-top

					
<form>
  <label>Username</label>
  <input type="text" />
  <p class="bf-info-tooltip bf-tooltip-right" data-tooltip="6 letters minimum">?</p>
</form>

Arrows

Add an arrow to the tooltip by adding the class .bf-arrow. It works with any direction. By default, it will apear below the element.