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.

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.

To install latest version via npm run:

npm install bootstrap-tooltip-custom-class

or via yarn run:

yarn add bootstrap-tooltip-custom-class

The implementations for Tooltips and Popovers 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.

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

<link rel="stylesheet" href="bootstrap-tooltip-custom-class.css" media="all" />

@import "bootstrap-tooltip-custom-class";

Use the mixin tooltip-custom to create styles for your custom tooltip:

.tooltip-custom {
  @include tooltip-custom(#f2653c, #fff);
}

@import "bootstrap-tooltip-custom-class.less";

Use the mixin tooltip-custom:

.tooltip-custom {
  .tooltip-custom(#f2653c, #fff);
}

Include the script after Bootstrap's main javascript file:

<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip-custom-class.js"></script>

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

<link rel="stylesheet" href="bootstrap-popover-custom-class.css" media="all" />

@import "bootstrap-popover-custom-class";

Use the mixin popover-custom to create styles for your custom popover:

.popover-custom {
  @include popover-custom(#f2653c, #fff);
}

@import "bootstrap-popover-custom-class.less";

Use the mixin popover-custom:

.popover-custom {
  .popover-custom(#f2653c, #fff);
}

Include the script after Bootstrap's main javascript file:

<script src="bootstrap.js"></script>
<script src="bootstrap-popover-custom-class.js"></script>

• Use data-custom-class attribute:

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-custom" title="Custom tooltip example">Tooltip example</button>

<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" data-custom-class="popover-custom" title="Custom popover example" data-content="Vivamus sagittis lacus vel augue laoreet">Popover example</button>

or

• Use customClass parameter on plugin initialization:

$(function () {
  $('.has-tooltip').tooltip({
    customClass: 'tooltip-custom'
  });
});

$(function () {
  $('.has-popover').popover({
    customClass: 'popover-custom'
  });
});

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)

• Bootstrap v4: Codepen
• Bootstrap v4-alpha: Codepen
• Bootstrap v3: Codepen

• Bootstrap v4: Codepen
• Bootstrap v4-alpha: Codepen
• Bootstrap v3: Codepen

• Bootstrap v4: Codepen
• Bootstrap v3: Codepen

For the CSS part, this project can also be used with the following libraries:

• Tooltips: https://codesandbox.io/s/react-bootstrap-with-bootstrap-tooltip-custom-class-n5x8u
• Popovers: https://codesandbox.io/s/react-bootstrap-with-bootstrap-tooltip-custom-class-0erhx

• Tooltips: https://stackblitz.com/edit/angular-qibctz
• Popovers: https://stackblitz.com/edit/angular-bpmfzc

• Tooltips: https://stackblitz.com/edit/angular-culnfu
• Popovers: https://stackblitz.com/edit/angular-evxzym