Skip to content

Commit ac6a077

Browse files
andreivictorandreivictor
authored
Implement Popover Custom class (#10)
* custom class for popover - bootstrap v3 * custom class for popover - bootstrap v3 * remove custom tooltip dependency * format scss & less code * update condition for bootstrap plugin * adding popover custom class for v4 * adding popover custom class for v4 alpha * add popover custom class * update description * update readme * update description
1 parent 1bdba9f commit ac6a077

File tree

124 files changed

+1753
-167
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

124 files changed

+1753
-167
lines changed

‎Gruntfile.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,9 @@ module.exports = function(grunt) {
1515
' * <%= pkg.name %>\n' +
1616
' * v<%= pkg.version %>\n' +
1717
' * <%= pkg.description %>\n' +
18-
' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %> - <%= pkg.homepage %>\n' +
18+
' * Copyright (c) 2017 - <%= grunt.template.today("yyyy") %> <%= pkg.author.name %> - <%= pkg.homepage %>\n' +
1919
' * License: <%= pkg.license %>\n' +
20-
' */\n\n',
21-
filename : 'bootstrap-tooltip-custom-class'
20+
' */\n\n'
2221
},
2322
sass: sassConfig,
2423
less: lessConfig,

‎README.md‎

Lines changed: 58 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
# Bootstrap Tooltip Custom Class
2-
Extend Bootstrap Tooltip plugin by adding custom classes to tooltips. Available for **Bootstrap 3** and **Bootstrap 4**.
2+
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for **Bootstrap 3** and **Bootstrap 4**.
33

4-
Define your own custom class or use the predefined custom classes: `.tooltip-primary`, `.tooltip-success`, `.tooltip-info`, `.tooltip-warning`, `.tooltip-danger`.
4+
Define your own custom class or use the predefined custom classes:
5+
- tooltips: `.tooltip-primary`, `.tooltip-success`, `.tooltip-info`, `.tooltip-warning`, `.tooltip-danger`.
6+
- popovers: `.popover-primary`, `.popover-success`, `.popover-info`, `.popover-warning`, `.popover-danger`.
57

68

79
![Bootstrap Tooltip Custom Class Preview](https://i.imgur.com/CNoQ13w.png)
@@ -21,7 +23,11 @@ yarn add bootstrap-tooltip-custom-class
2123

2224
## Setup
2325

24-
**Use the appropriate files according to Bootstrap version that you use.**
26+
**The implementations for [Tooltips][1] and [Popovers][2] are independent. You can include them together or you can use them separately.**
27+
28+
**Use the appropriate files according to Bootstrap version that you use: `bootstrap-v3`, `bootstrap-v4` or `bootstrap-v4-alpha`.**
29+
30+
### Tooltips
2531

2632
#### CSS
2733
Include `bootstrap-tooltip-custom-class.css` in your project or use the `.scss` file:
@@ -57,29 +63,74 @@ Include the script after Bootstrap's main javascript file:
5763
<script src="bootstrap-tooltip-custom-class.js"></script>
5864
```
5965

66+
### Popovers
67+
#### CSS
68+
Include `bootstrap-popover-custom-class.css` in your project or use the `.scss` file:
69+
```html
70+
<link rel="stylesheet" href="bootstrap-popover-custom-class.css" media="all" />
71+
```
72+
#### SASS:
73+
```sass
74+
@import "bootstrap-popover-custom-class";
75+
```
76+
Use the mixin `popover-custom` to create styles for your custom popover:
77+
````sass
78+
.popover-custom {
79+
@include popover-custom(#f2653c, #fff);
80+
}
81+
````
82+
83+
#### Less (only for Bootstrap v3):
84+
```less
85+
@import "bootstrap-popover-custom-class.less";
86+
```
87+
Use the mixin `popover-custom`:
88+
````less
89+
.popover-custom {
90+
.popover-custom(#f2653c, #fff);
91+
}
92+
````
93+
94+
#### Javascript
95+
Include the script after Bootstrap's main javascript file:
96+
```html
97+
<script src="bootstrap.js"></script>
98+
<script src="bootstrap-popover-custom-class.js"></script>
99+
```
100+
60101
## Usage
61102

62103
- Use `data-custom-class` attribute:
63104

64105
```html
65106
<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>
66107
```
108+
```html
109+
<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>
110+
```
67111

68112
or
69113

70114
- Use `customClass` parameter on plugin initialization:
71115
```javascript
72116
$(function () {
73-
$('.my-element').tooltip({
117+
$('.has-tooltip').tooltip({
74118
customClass: 'tooltip-custom'
75119
});
76120
});
77121
```
122+
```javascript
123+
$(function () {
124+
$('.has-popover').popover({
125+
customClass: 'popover-custom'
126+
});
127+
});
128+
```
78129

79130
## Demo
80131

81132
#### Local
82-
Local demo files can be found in the `demo` folder of each project (`bootstrap-v3`, `bootstrap-v4`, `bootstrap-v4-alpha`).
133+
Local demo files can be found in the `demo` folder of each project.
83134
First, execute the following instructions in the root:
84135

85136
```
@@ -96,3 +147,5 @@ $ npm run build-#project_alias# (or) npm run build-all
96147
- Bootstrap 3: [Codepen](https://codepen.io/andreivictor/full/gmNeJq)
97148

98149

150+
[1]: #tooltips
151+
[2]: #popovers

‎bootstrap-v3/dist/css/bootstrap-tooltip-custom-class.min.css.map‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎bootstrap-v3/dist/js/bootstrap-tooltip-custom-class.min.js‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎bootstrap-v3/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "bootstrap-tooltip-custom-class",
3-
"description": "Extend Bootstrap Tooltip plugin by adding custom classes. For Bootstrap v3.",
3+
"description": "Extends Bootstrap Tooltips and Popovers by adding custom classes. For Bootstrap v3.",
44
"repository": {
55
"type": "git",
66
"url": "git+https://github.com/andreivictor/bootstrap-tooltip-custom-class.git"

‎bootstrap-v3/popover/demo/demo.css‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
.popover-primary .popover-title {
2+
background: #337ab7;
3+
color: #fff;
4+
}
5+
6+
.popover-success .popover-title {
7+
background: #5cb85c;
8+
color: #fff;
9+
}
10+
11+
.popover-info .popover-title {
12+
background: #5bc0de;
13+
color: #fff;
14+
}
15+
16+
.popover-warning .popover-title {
17+
background: #f0ad4e;
18+
color: #fff;
19+
}
20+
21+
.popover-danger .popover-title {
22+
background: #d9534f;
23+
color: #fff;
24+
}
25+
26+
.popover-custom .popover-title {
27+
background: #f2653c;
28+
color: #ffffff;
29+
}
30+
31+
.popover-custom-alt .popover-title {
32+
background: #5b2da3;
33+
color: #ffffff;
34+
}
35+
36+
body {
37+
padding-top: 50px;
38+
}
39+
40+
#topnav {
41+
z-index: 1061;
42+
}
43+
44+
#topnav .navbar-header {
45+
float: left;
46+
}
47+
48+
#topnav .navbar-right {
49+
float: right !important;
50+
margin: 0 -15px 0 0;
51+
}
52+
53+
@media (max-width: 340px) {
54+
#topnav .navbar-brand {
55+
font-size: 14px;
56+
}
57+
}
58+
59+
#topnav .navbar-nav > li > a {
60+
padding-top: 11px;
61+
padding-bottom: 11px;
62+
}
63+
64+
#topnav .navbar-nav > li > a > i {
65+
font-size: 26px;
66+
}
67+
68+
.bs-example {
69+
position: relative;
70+
margin: 15px;
71+
padding: 15px 15px 25px;
72+
border: 1px solid #ddd;
73+
border-radius: 4px 4px 0 0;
74+
}
75+
76+
.bs-example .btn {
77+
margin: 5px;
78+
}
79+
80+
.bs-example__title {
81+
margin-bottom: 20px;
82+
}
83+
84+
.bs-example--static .popover {
85+
position: relative;
86+
display: inline-block;
87+
margin: 20px;
88+
}

‎bootstrap-v3/popover/demo/demo.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
$(document).ready(function(){
2+
$('.btn-default').popover();
3+
$('.btn-custom').popover({
4+
customClass: 'popover-custom'
5+
});
6+
$('.btn-custom-alt').popover({
7+
customClass: 'popover-custom-alt'
8+
});
9+
});

‎bootstrap-v3/popover/demo/demo.scss‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
2+
@import "../src/scss/bootstrap-popover-custom-class";
3+
4+
.popover-custom {
5+
@include popover-custom(#f2653c, #ffffff);
6+
}
7+
8+
.popover-custom-alt {
9+
@include popover-custom(#5b2da3, #ffffff);
10+
}
11+
12+
//== Demo layout
13+
//
14+
//##
15+
body {
16+
padding-top: 50px;
17+
}
18+
19+
#topnav {
20+
z-index: ($zindex-popover + 1);
21+
22+
.navbar-header {
23+
float: left;
24+
}
25+
.navbar-right {
26+
float: right !important;
27+
margin: 0 -15px 0 0;
28+
}
29+
@media (max-width: 340px) {
30+
.navbar-brand {
31+
font-size: $font-size-base;
32+
}
33+
}
34+
35+
.navbar-nav>li>a {
36+
padding-top: 11px;
37+
padding-bottom: 11px;
38+
}
39+
40+
.navbar-nav>li>a>i {
41+
font-size: 26px;
42+
}
43+
}
44+
45+
.bs-example {
46+
position: relative;
47+
margin: 15px;
48+
padding: 15px 15px 25px;
49+
border: 1px solid #ddd;
50+
border-radius: 4px 4px 0 0;
51+
}
52+
.bs-example .btn {
53+
margin: 5px;
54+
}
55+
56+
.bs-example__title {
57+
margin-bottom: 20px;
58+
}
59+
60+
.bs-example--static .popover {
61+
position: relative;
62+
display: inline-block;
63+
margin: 20px;
64+
}

0 commit comments

Comments
 (0)