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.
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 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.
Tooltips
CSS
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" />
SASS:
@import "bootstrap-tooltip-custom-class";
Use the mixin tooltip-custom to create styles for your custom tooltip:
.tooltip-custom {
@include tooltip-custom(#f2653c, #fff);
}
Less (only for Bootstrap v3):
@import "bootstrap-tooltip-custom-class.less";
Use the mixin tooltip-custom:
.tooltip-custom {
.tooltip-custom(#f2653c, #fff);
}
Javascript
Include the script after Bootstrap's main javascript file:
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip-custom-class.js"></script>
Popovers
CSS
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" />
SASS:
@import "bootstrap-popover-custom-class";
Use the mixin popover-custom to create styles for your custom popover:
.popover-custom {
@include popover-custom(#f2653c, #fff);
}
Less (only for Bootstrap v3):
@import "bootstrap-popover-custom-class.less";
Use the mixin popover-custom:
.popover-custom {
.popover-custom(#f2653c, #fff);
}
Javascript
Include the script after Bootstrap's main javascript file:
<script src="bootstrap.js"></script>
<script src="bootstrap-popover-custom-class.js"></script>
Usage
- Use
data-custom-classattribute:
<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
customClassparameter on plugin initialization:
$(function () {
$('.has-tooltip').tooltip({
customClass: 'tooltip-custom'
});
});
$(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
Tooltip
Popover
Tooltip + Popover
Integrations with other libraries
For the CSS part, this project can also be used with the following libraries:
React Bootstrap [https://react-bootstrap.github.io/]:
- 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
ngx-bootstrap [https://valor-software.com/ngx-bootstrap]
- Tooltips: https://stackblitz.com/edit/angular-qibctz
- Popovers: https://stackblitz.com/edit/angular-bpmfzc
ng-bootstrap [https://ng-bootstrap.github.io/]
- Tooltips: https://stackblitz.com/edit/angular-culnfu
- Popovers: https://stackblitz.com/edit/angular-evxzym
![[Bootstrap v4] Generate Tooltips from the $theme-colors map](https://avatars.githubusercontent.com/u/5020835?v=4)
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
2 Jun 21, 2022
777 Nov 9, 2022
714 Jan 2, 2023
9 Nov 2, 2022
7 Sep 27, 2022
5 Oct 23, 2022
208 Jan 8, 2023
4 May 22, 2022
44 Dec 7, 2022
3 Dec 29, 2022
8 Nov 27, 2022
21 Dec 11, 2022
4 Nov 23, 2022
72 Sep 30, 2022
3 Oct 21, 2022
18 Aug 18, 2022