Get started

You only need 1 CSS file to use BulmaTooltip

Installation

First, let’s install the component!

There are several ways to get started with BulmaTooltip.

Use npm to install the bulma-tooltip package recommended

npm install @creativebulma/bulma-tooltip

Use the jsDelivr CDN to link to the BulmaTooltip stylesheet

https://www.jsdelivr.com/package/npm/@creativebulma/bulma-tooltip

Use the GitHub repository to get the latest development version.

Download from the repository https://github.com/CreativeBulma/bulma-tooltip/tree/master/dist/

Usage

Tooltips are displayed into a small grey box on top of the element. All you have to do is to add tooltip dataset with the text you want to display as value.

Styles

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.


<p>Lorem ipsum dolor sit amet, <span data-tooltip="Tooltip content">consectetur adipisicing elit</span>. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.</p>

Tooltip can be used on any type of HTML element supporting dataset. 


<button class="button" data-tooltip="Tooltip Text">top tooltip</button>

With Arrow

For design purpose, you can display an arrow on the tooltip box by adding has-tooltip-arrow class on the element.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.


<p>Lorem ipsum dolor sit amet, <span class="has-tooltip-arrow" data-tooltip="Tooltip content">consectetur adipisicing elit</span>. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.</p>

Position

Tooltip position can be changed by adding one of the following classes to the HTML element containing the tooltip: has-tooltip-right, has-tooltip-bottom, has-tooltip-left.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.


<p>Lorem ipsum dolor sit amet, <span class="has-tooltip-arrow" data-tooltip="Tooltip content on top">consectetur adipisicing elit</span>. Ipsa fugit <span class="has-tooltip-arrow has-tooltip-right" data-tooltip="Right tooltip content">dolores</span> earum quod distinctio ducimus non dignissimos <span class="has-tooltip-arrow has-tooltip-bottom" data-tooltip="Bottom tooltip content">molestias</span> amet corrupti voluptatum assumenda impedit beatae <span class="has-tooltip-arrow has-tooltip-left" data-tooltip="Left tooltip content">veritatis</span> nemo veniam error, hic cumque.</p>

Multiline

Display long tooltip content by adding has-tooltip-multiline class on the element.

You can change tooltip text alignement by adding has-tooltip-text-left, has-tooltip-text-centered or has-tooltip-text-right modifier.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.


<p>Lorem ipsum dolor sit amet, <span class="has-tooltip-arrow has-tooltipl-multiline" data-tooltip="Multiline&#10;Content&#10;World!">consectetur adipisicing elit</span>. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.</p>

Colors

Tooltip supports colors modifier by adding one of the following classes to the HTML element containing the tooltip: has-tooltip-info, has-tooltip-warning, has-tooltip-primary, has-tooltip-success, has-tooltip-danger.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.


<p>Lorem ipsum <span class="has-tooltip-arrow has-tooltip-info" data-tooltip="Info tooltip content">dolor</span> sit amet, <span class="has-tooltip-arrow has-tooltip-warning" data-tooltip="Warning tooltip content">consectetur adipisicing elit</span>. Ipsa fugit <span class="has-tooltip-arrow has-tooltip-right has-tooltip-success" data-tooltip="Success tooltip content">dolores</span> earum quod distinctio ducimus non dignissimos <span class="has-tooltip-arrow has-tooltip-bottom has-tooltip-primary" data-tooltip="Primary tooltip content">molestias</span> amet corrupti voluptatum assumenda impedit beatae <span class="has-tooltip-arrow has-tooltip-left has-tooltip-danger" data-tooltip="Danger tooltip content">veritatis</span> nemo veniam error, hic cumque.</p>

Always active

You can set tooltip to be always visible by adding has-tooltip-active class on the element.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.


<p>Lorem ipsum dolor sit amet, <span class="has-tooltip-active" data-tooltip="Tooltip content">consectetur adipisicing elit</span>. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.</p>

Responsiveness

Position

Tooltip position can be based on responsiveness breakpoints by adding one of the following classes to the HTML element containing the tooltip:

  • has-tooltip-#{$direction}-mobile
  • has-tooltip-#{$direction}-tablet
  • has-tooltip-#{$direction}-tablet-only
  • has-tooltip-#{$direction}-touch
  • has-tooltip-#{$direction}-desktop
  • has-tooltip-#{$direction}-desktop-only
  • has-tooltip-#{$direction}-until-widescreen
  • has-tooltip-#{$direction}-widescreen
  • has-tooltip-#{$direction}-widescreen-only
  • has-tooltip-#{$direction}-until-fullhd
  • has-tooltip-#{$direction}-fullhd

Don’t forget to replace #${direction} by one of the avaiblable direction: top, right, bottom, left.

Text alignement

  • has-tooltip-text-#{$direction}-mobile
  • has-tooltip-text-#{$direction}-tablet
  • has-tooltip-text-#{$direction}-tablet-only
  • has-tooltip-text-#{$direction}-touch
  • has-tooltip-text-#{$direction}-desktop
  • has-tooltip-text-#{$direction}-desktop-only
  • has-tooltip-text-#{$direction}-until-widescreen
  • has-tooltip-text-#{$direction}-widescreen
  • has-tooltip-text-#{$direction}-widescreen-only
  • has-tooltip-text-#{$direction}-until-fullhd
  • has-tooltip-text-#{$direction}-fullhd

Don’t forget to replace #${direction} by one of the avaiblable direction: left, centered, right.

Hide tooltip

Class Mobile Tablet Desktop Widescreen FullHD
has-tooltip-hidden-mobile hidden visible visible visible visible
has-tooltip-hidden-tablet-only visible hidden visible visible visible
has-tooltip-hidden-desktop-only visible visible hidden visible visible
has-tooltip-hidden-widescreen-only visible visible visible hidden visible
has-tooltip-hidden-touch hidden hidden visible visible visible
has-tooltip-hidden-tablet visible hidden hidden hidden hidden
has-tooltip-hidden-desktop visible visible hidden hidden hidden
has-tooltip-hidden-widescreen visible visible visible hidden hidden
has-tooltip-hidden-fullhd visible visible visible visible hidden