Documentation

This site gathers documentation of my GitHub projects

Tooltip

Display a tooltip attached to any kind of element, in different position.

Colors Yes
Sizes Yes
Variables Yes

<div class="column">
  <button class="button is-primary tooltip" data-tooltip="Tooltip Text">Tooltip</button>
</div>

Positions

You can use .is-tooltip-top .is-tooltip-right .is-tooltip-bottom .is-tooltip-left modifiers to change the tooltip position

<div class="columns text-center">
  <div class="column">
    <button class="button is-primary tooltip" data-tooltip="Tooltip Text">top tooltip</button>
  </div>
  <div class="column">
    <button class="button is-primary tooltip is-tooltip-right" data-tooltip="Tooltip Text">right tooltip</button>
  </div>
  <div class="column">
    <button class="button is-primary tooltip is-tooltip-bottom" data-tooltip="Tooltip Text">bottom tooltip</button>
  </div>
  <div class="column">
    <button class="button is-primary tooltip is-tooltip-left" data-tooltip="Tooltip Text">left tooltip</button>
  </div>
</div>

Sizes #

You can force multine display by using .is-tooltip-multiline modifier.

<div class="column">
  <button class="button is-primary tooltip is-tooltip-multiline" data-tooltip="Tooltip with a long Text. So we use is-tooltip-multiline modifier to force multiline display.">Multiline Tooltip</button>
</div>

Colors #

You can use color modifiers to change the tooltip background color.

<div class="columns text-center">
  <div class="column">
    <button class="button is-tooltip-primary tooltip" data-tooltip="Tooltip Text">Primary tooltip</button>
  </div>
  <div class="column">
    <button class="button is-tooltip-info tooltip" data-tooltip="Tooltip Text">Info tooltip</button>
  </div>
  <div class="column">
    <button class="button is-tooltip-success tooltip" data-tooltip="Tooltip Text">Success tooltip</button>
  </div>
  <div class="column">
    <button class="button is-tooltip-warning tooltip" data-tooltip="Tooltip Text">Warning tooltip</button>
  </div>
  <div class="column">
    <button class="button is-tooltip-danger tooltip" data-tooltip="Tooltip Text">Danger tooltip</button>
  </div>
</div>

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$tooltip-background-color $grey-dark
$tooltip-max-width 24rem

This page is designed with Bulma CSS framework.