Software Development · April 22, 2022

Using Bulma-tooltip in Next.js

How can I used bulma-tooltip in my Next.js project.

yarn add @creativebulma/bulma-tooltip

Add scss file into your global scss.

@import '~bulma/bulma.sass';
@import '[email protected]/bulma-tooltip/src/sass/index.sass';

Use it in HTML element that support dataset

<div
  className="ml-2 has-tooltip-multiline has-tooltip-info"
  data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
>
  <span className="material-icons">help_outline</span>
</div>

Ref:

https://github.com/CreativeBulma/bulma-tooltip/