You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.
Documentation
Everything you need to start with Bulma-extensions.
<div class="column">
<button class="button is-primary tooltip" data-tooltip="Tooltip Text">Tooltip</button>
</div>
You can use one of the following modifiers to change positions of the tooltip:
.is-tooltip-top
.is-tooltip-right
.is-tooltip-bottom
.is-tooltip-left
<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>
<div class="column">
<button class="button is-primary tooltip is-tooltip-top is-tooltip-bottom-desktop is-tooltip-active" data-tooltip="Hi! I'm on top and bottom.">Top and Bottom</button>
</div>
The format of the responsiveness classes is
is-tooltip-**position**-**responsive_helper**
,
such as is-tooltip-bottom-desktop
and is-tooltip-left-tablet-only
.
Beware that you should place the responsiveness classes after the main position class.
.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>
<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>
.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>
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
|