Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andreivictor/bootstrap-tooltip-custom-class
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.
https://github.com/andreivictor/bootstrap-tooltip-custom-class
bootstrap bootstrap-3 bootstrap-4 bootstrap3 bootstrap4
Last synced: 2 months ago
JSON representation
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.
- Host: GitHub
- URL: https://github.com/andreivictor/bootstrap-tooltip-custom-class
- Owner: andreivictor
- License: mit
- Created: 2017-04-08T09:53:48.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-24T15:27:31.000Z (almost 2 years ago)
- Last Synced: 2024-10-01T18:08:29.784Z (3 months ago)
- Topics: bootstrap, bootstrap-3, bootstrap-4, bootstrap3, bootstrap4
- Language: HTML
- Homepage:
- Size: 2.13 MB
- Stars: 15
- Watchers: 1
- Forks: 3
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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][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`.**
### Tooltips
#### 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
```
### Popovers
#### 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
##### Tooltip
- Bootstrap v4: [Codepen](https://codepen.io/andreivictor/full/ayewjW)
- Bootstrap v4-alpha: [Codepen](http://codepen.io/andreivictor/full/MpNQNL)
- Bootstrap v3: [Codepen](https://codepen.io/andreivictor/full/gmNeJq)
##### Popover
- Bootstrap v4: [Codepen](https://codepen.io/andreivictor/full/bGNZVVX)
- Bootstrap v4-alpha: [Codepen](https://codepen.io/andreivictor/full/KKwEdXg)
- Bootstrap v3: [Codepen](https://codepen.io/andreivictor/full/wvBOKJw)
##### Tooltip + Popover
- Bootstrap v4: [Codepen](https://codepen.io/andreivictor/full/PoqwKNj)
- Bootstrap v3: [Codepen](https://codepen.io/andreivictor/full/OJVPjEv)
[1]: #tooltips
[2]: #popovers
## 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