This component has been designed to be easily customizable.
There is 2 ways to customize it, depending on the way you integrate this component into your project.
If you use the Sass source into your project, all you have to do is to customize variables before importing the component.
$tooltip-radius: 6px
@import '@creativebulma/bulma-tooltip'
| Variable name | Description | Default value |
|---|---|---|
| $tooltip-animation-duration | .3s |
|
| animation-transition-timing-function | linear |
|
| $tooltip-arrow-size | 6px |
|
| $tooltip-background-color | $grey-dark |
|
| $tooltip-background-opacity | 0.9 |
|
| $tooltip-color | $white |
|
| $tooltip-font-family | $family-primary |
|
| $tooltip-font-size | $size-7 |
|
| $tooltip-max-width | 15rem |
|
| $tooltip-padding | .5rem 1rem |
|
| $tooltip-radius | $radius-small |
|
| $tooltip-z-index | 1020 |
If you uses the CSS version you have to customize Sass source files then rebuild the CSS file.
npm install
This command will install all development required package.
Customize Sass variables defined wihtin src/sass/_variables.sass file.
You can build CSS files by launching the build process with the command:
npm run build
Styles are built using node-sass from src/sass directory and minify them.
Built files will be copied into /dist directory (can be customized within package.json).