Tooltip

Display a tooltip attached to any kind of element with different positioning.

Colors Yes
Sizes Yes
Javascript No
Variables Yes

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

Positions

You can use one of the following modifiers to change positions of the tooltip:

<div class="columns is-multiline 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 multiline display by using the .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 is-multiline 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>

AlwaysActive #

By adding the .is-tooltip-active modifier, you can make a tooltip show always, instead of just when hovering over the element.

<div class="columns is-multiline text-center">
  <div class="column">
    <button class="button is-primary tooltip is-tooltip-active" data-tooltip="Tooltip Text">Always active 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-background-opacity 0.9
$tooltip-max-width 24rem