Tooltip

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

View on Github

NPM Package 0.1.1

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:

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

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`