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>
    

Responsive Positioning #

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

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

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