Bootstrap Tooltip Custom Class

Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Define your own custom class or use the predefined custom classes:
- tooltips: .tooltip-primary, .tooltip-success, .tooltip-info, .tooltip-warning, .tooltip-danger.
- popovers: .popover-primary, .popover-success, .popover-info, .popover-warning, .popover-danger.

!Bootstrap Tooltip Custom Class Preview

!Bootstrap Popover Custom Class Preview

In Bootstrap 4, the predefined tooltips and popovers are built from the $theme-colors map, so there are 3 more custom classes:
- tooltips: .tooltip-secondary, .tooltip-light, .tooltip-dark.
- popovers: .popover-secondary, .popover-light, .popover-dark.

Installation

To install latest version via npm run:

``
npm install bootstrap-tooltip-custom-class
`
or via yarn run:

`
yarn add bootstrap-tooltip-custom-class
`

Setup

The implementations for [Tooltips][1] and [Popovers][2] are independent. You can include them together or you can use them separately.

Use the appropriate files according to Bootstrap version that you use: bootstrap-v3, bootstrap-v4 or bootstrap-v4-alpha.

$3

#### CSS
Include bootstrap-tooltip-custom-class.css in your project or use the .scss file:
`html

`
#### SASS:
`sass
@import "bootstrap-tooltip-custom-class";
`
Use the mixin tooltip-custom to create styles for your custom tooltip:
``sass
.tooltip-custom {
@include tooltip-custom(#f2653c, #fff);
}
``

#### Less (only for Bootstrap v3):
`less
@import "bootstrap-tooltip-custom-class.less";
`
Use the mixin tooltip-custom:
``less
.tooltip-custom {
.tooltip-custom(#f2653c, #fff);
}
``

#### Javascript
Include the script after Bootstrap's main javascript file:
`html


`

$3


#### CSS
Include bootstrap-popover-custom-class.css in your project or use the .scss file:
`html

`
#### SASS:
`sass
@import "bootstrap-popover-custom-class";
`
Use the mixin popover-custom to create styles for your custom popover:
``sass
.popover-custom {
@include popover-custom(#f2653c, #fff);
}
``

#### Less (only for Bootstrap v3):
`less
@import "bootstrap-popover-custom-class.less";
`
Use the mixin popover-custom:
``less
.popover-custom {
.popover-custom(#f2653c, #fff);
}
``

#### Javascript
Include the script after Bootstrap's main javascript file:
`html


`

Usage

- Use data-custom-class attribute:

`html
Tooltip example
`
`html
Popover example
`

or

- Use customClass parameter on plugin initialization:
`javascript
$(function () {
$('.has-tooltip').tooltip({
customClass: 'tooltip-custom'
});
});
`
`javascript
$(function () {
$('.has-popover').popover({
customClass: 'popover-custom'
});
});
`

Demo

#### Local
Local demo files can be found in the demo folder of each project.
First, execute the following instructions in the root:

`
$ npm install
$ npm run install-#project_alias# (or) npm run install-all
$ npm run build-#project_alias# (or) npm run build-all

(project_alias = v3 / v4 / v4-alpha)
``

#### Online
- Bootstrap v4: Codepen
- Bootstrap v4-alpha: Codepen
- Bootstrap 3: Codepen

[1]: #tooltips
[2]: #popovers