Tooltip

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

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 .is-tooltip-top .is-tooltip-right .is-tooltip-bottom .is-tooltip-left modifiers to change the tooltip position

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

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