Documentation

Everything you need to start with Bulma-extensions.

New version and its documentation is now available on its new repository CreativeBulma - BulmaTooltipt.

Tooltip

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

View on Github

NPM Package 3.0.2

Colors Yes

Sizes Yes

Javascript No

Variables Yes

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

Positions

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

.has-tooltip-top
.has-tooltip-right
.has-tooltip-bottom
.has-tooltip-left

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

Responsive Positioning #

You can position the tooltip at differently depending on the screen size.

      <div class="column">
  <button class="button is-primary has-tooltip-top has-tooltip-bottom-desktop has-tooltip-active" data-tooltip="Hi! I'm on top and bottom.">Top and Bottom</button>
</div>
    

The format of the responsiveness classes is has-tooltip-**position**-**responsive_helper**, such as has-tooltip-bottom-desktop and has-tooltip-left-tablet-only.

Beware that you should place the responsiveness classes after the main position class.

List of Responsive Helpers

You may refer to the Documentation of Bulma for all of the available responsive helpers.

Sizes #

You can force multiline display by using the `.has-tooltip-multiline` modifier.

      <div class="column">
  <button class="button is-primary has-tooltip-multiline" data-tooltip="Tooltip with a long Text. So we use has-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 has-tooltip-primary" data-tooltip="Tooltip Text">Primary tooltip</button>
  </div>
  <div class="column">
    <button class="button has-tooltip-info" data-tooltip="Tooltip Text">Info tooltip</button>
  </div>
  <div class="column">
    <button class="button has-tooltip-success" data-tooltip="Tooltip Text">Success tooltip</button>
  </div>
  <div class="column">
    <button class="button has-tooltip-warning" data-tooltip="Tooltip Text">Warning tooltip</button>
  </div>
  <div class="column">
    <button class="button has-tooltip-danger" data-tooltip="Tooltip Text">Danger tooltip</button>
  </div>
</div>
    

AlwaysActive #

By adding the `.has-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 has-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-arrow-size`	`6px`
`$tooltip-background-color`	`$grey-dark`
`$tooltip-background-opacity`	`0.9`
`$tooltip-color`	`$white`
`$tooltip-font-family`	`$family-primary`
`$tooltip-font-size`	`$size-7`
`$tooltip-max-width`	`15rem`
`$tooltip-padding`	`.5rem 1rem`
`$tooltip-radius`	`$radius-small`
`$tooltip-z-index`	`1020`