Get started

Although Bulma is a pure CSS Framework, modern Website and application use JavaScript to provide a friendlier experience. BulmaBoilerplate has been designed with that in mind and provides a clean structured project with modularity.

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>

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>