Skip to content

Commit 59de099

Browse files
andreivictorandreivictor
authored
[bootstrap v4] generate tooltips & popovers from $theme-colors map (#11)
* generate tooltips from theme-colors * generate popovers from theme-colors
1 parent 833e9b7 commit 59de099

13 files changed

+277
-57
lines changed

‎README.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,13 @@ Define your own custom class or use the predefined custom classes:
55
- tooltips: `.tooltip-primary`, `.tooltip-success`, `.tooltip-info`, `.tooltip-warning`, `.tooltip-danger`.
66
- popovers: `.popover-primary`, `.popover-success`, `.popover-info`, `.popover-warning`, `.popover-danger`.
77

8+
![Bootstrap Tooltip Custom Class Preview](https://i.imgur.com/jxNbT5S.png)
89

9-
![Bootstrap Tooltip Custom Class Preview](https://i.imgur.com/CNoQ13w.png)
10+
![Bootstrap Popover Custom Class Preview](https://i.imgur.com/FFUqwUq.png)
11+
12+
In **Bootstrap 4**, the predefined tooltips and popovers are built from the `$theme-colors` map, so there are 3 more custom classes:
13+
- tooltips: `.tooltip-secondary`, `.tooltip-light`, `.tooltip-dark`.
14+
- popovers: `.popover-secondary`, `.popover-light`, `.popover-dark`.
1015

1116

1217
## Installation

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

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,19 @@
1111
border-bottom-color: #007bff;
1212
}
1313

14+
.popover-secondary .popover-header {
15+
background: #6c757d;
16+
color: #fff;
17+
}
18+
19+
.popover-secondary.bs-popover-bottom .popover-header::before, .popover-secondary.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
20+
display: none;
21+
}
22+
23+
.popover-secondary.bs-popover-bottom > .arrow::after, .popover-secondary.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
24+
border-bottom-color: #6c757d;
25+
}
26+
1427
.popover-success .popover-header {
1528
background: #28a745;
1629
color: #fff;
@@ -39,7 +52,7 @@
3952

4053
.popover-warning .popover-header {
4154
background: #ffc107;
42-
color: #fff;
55+
color: #212529;
4356
}
4457

4558
.popover-warning.bs-popover-bottom .popover-header::before, .popover-warning.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
@@ -63,6 +76,32 @@
6376
border-bottom-color: #dc3545;
6477
}
6578

79+
.popover-light .popover-header {
80+
background: #f8f9fa;
81+
color: #212529;
82+
}
83+
84+
.popover-light.bs-popover-bottom .popover-header::before, .popover-light.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
85+
display: none;
86+
}
87+
88+
.popover-light.bs-popover-bottom > .arrow::after, .popover-light.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
89+
border-bottom-color: #f8f9fa;
90+
}
91+
92+
.popover-dark .popover-header {
93+
background: #343a40;
94+
color: #fff;
95+
}
96+
97+
.popover-dark.bs-popover-bottom .popover-header::before, .popover-dark.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
98+
display: none;
99+
}
100+
101+
.popover-dark.bs-popover-bottom > .arrow::after, .popover-dark.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
102+
border-bottom-color: #343a40;
103+
}
104+
66105
.popover-custom .popover-header {
67106
background: #f2653c;
68107
color: #ffffff;

‎bootstrap-v4/popover/demo/index.html‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,24 +34,39 @@ <h3 class="bs-example__title">Static examples</h3>
3434
<h3 class="popover-header">Popover primary example</h3>
3535
<div class="popover-body">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</div>
3636
</div>
37+
<div class="popover popover-secondary bs-popover-top" role="tooltip">
38+
<div class="arrow"></div>
39+
<h3 class="popover-header">Popover secondary example</h3>
40+
<div class="popover-body">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</div>
41+
</div>
3742
<div class="popover popover-success bs-popover-top" role="tooltip">
3843
<div class="arrow"></div>
3944
<h3 class="popover-header">Popover success example</h3>
4045
<div class="popover-body">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</div>
4146
</div>
47+
<div class="popover popover-danger bs-popover-left" role="tooltip">
48+
<div class="arrow"></div>
49+
<h3 class="popover-header">Popover danger example</h3>
50+
<div class="popover-body">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</div>
51+
</div>
52+
<div class="popover popover-warning bs-popover-right" role="tooltip">
53+
<div class="arrow"></div>
54+
<h3 class="popover-header">Popover warning example</h3>
55+
<div class="popover-body">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</div>
56+
</div>
4257
<div class="popover popover-info bs-popover-top" role="tooltip">
4358
<div class="arrow"></div>
4459
<h3 class="popover-header">Popover info example</h3>
4560
<div class="popover-body">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</div>
4661
</div>
47-
<div class="popover popover-warning bs-popover-left" role="tooltip">
62+
<div class="popover popover-light bs-popover-bottom" role="tooltip">
4863
<div class="arrow"></div>
49-
<h3 class="popover-header">Popover warning example</h3>
64+
<h3 class="popover-header">Popover light example</h3>
5065
<div class="popover-body">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</div>
5166
</div>
52-
<div class="popover popover-danger bs-popover-right" role="tooltip">
67+
<div class="popover popover-dark bs-popover-bottom" role="tooltip">
5368
<div class="arrow"></div>
54-
<h3 class="popover-header">Popover danger example</h3>
69+
<h3 class="popover-header">Popover dark example</h3>
5570
<div class="popover-body">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</div>
5671
</div>
5772
</div>
@@ -73,10 +88,15 @@ <h3 class="popover-header">Another custom popover</h3>
7388
<h3 class="bs-example__title">Dinamic examples</h3>
7489
<div class="bs-example__row">
7590
<button class="btn btn-secondary" data-toggle="popover" data-trigger="focus" data-placement="top" data-custom-class="popover-primary" title="Popover primary example" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover primary</button>
91+
<button class="btn btn-secondary" data-toggle="popover" data-trigger="focus" data-placement="top" data-custom-class="popover-secondary" title="Popover secondary example" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover secondary</button>
7692
<button class="btn btn-secondary" data-toggle="popover" data-trigger="focus" data-placement="top" data-custom-class="popover-success" title="Popover success example" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover success</button>
77-
<button class="btn btn-secondary" data-toggle="popover" data-trigger="focus" data-placement="top" data-custom-class="popover-info" title="Popover info example" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover info</button>
78-
<button class="btn btn-secondary" data-toggle="popover" data-trigger="focus" data-placement="top" data-custom-class="popover-warning" title="Popover warning example" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover warning</button>
7993
<button class="btn btn-secondary" data-toggle="popover" data-trigger="focus" data-placement="top" data-custom-class="popover-danger" title="Popover danger example" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover danger</button>
94+
<div class="bs-example__row">
95+
<button class="btn btn-secondary" data-toggle="popover" data-trigger="focus" data-placement="top" data-custom-class="popover-warning" title="Popover warning example" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover warning</button>
96+
<button class="btn btn-secondary" data-toggle="popover" data-trigger="focus" data-placement="top" data-custom-class="popover-info" title="Popover info example" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover info</button>
97+
<button class="btn btn-secondary" data-toggle="popover" data-trigger="focus" data-placement="top" data-custom-class="popover-light" title="Popover light example" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover light</button>
98+
<button class="btn btn-secondary" data-toggle="popover" data-trigger="focus" data-placement="top" data-custom-class="popover-dark" title="Popover dark example" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover dark</button>
99+
</div>
80100
</div>
81101
<div class="bs-example__row">
82102
<button class="btn btn-custom" data-toggle="popover" data-trigger="focus" data-placement="bottom" title="Custom popover example" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Custom popover</button>

‎bootstrap-v4/popover/dist/css/bootstrap-popover-custom-class.css‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,19 @@
2020
border-bottom-color: #007bff;
2121
}
2222

23+
.popover-secondary .popover-header {
24+
background: #6c757d;
25+
color: #fff;
26+
}
27+
28+
.popover-secondary.bs-popover-bottom .popover-header::before, .popover-secondary.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
29+
display: none;
30+
}
31+
32+
.popover-secondary.bs-popover-bottom > .arrow::after, .popover-secondary.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
33+
border-bottom-color: #6c757d;
34+
}
35+
2336
.popover-success .popover-header {
2437
background: #28a745;
2538
color: #fff;
@@ -48,7 +61,7 @@
4861

4962
.popover-warning .popover-header {
5063
background: #ffc107;
51-
color: #fff;
64+
color: #212529;
5265
}
5366

5467
.popover-warning.bs-popover-bottom .popover-header::before, .popover-warning.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
@@ -71,3 +84,29 @@
7184
.popover-danger.bs-popover-bottom > .arrow::after, .popover-danger.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
7285
border-bottom-color: #dc3545;
7386
}
87+
88+
.popover-light .popover-header {
89+
background: #f8f9fa;
90+
color: #212529;
91+
}
92+
93+
.popover-light.bs-popover-bottom .popover-header::before, .popover-light.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
94+
display: none;
95+
}
96+
97+
.popover-light.bs-popover-bottom > .arrow::after, .popover-light.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
98+
border-bottom-color: #f8f9fa;
99+
}
100+
101+
.popover-dark .popover-header {
102+
background: #343a40;
103+
color: #fff;
104+
}
105+
106+
.popover-dark.bs-popover-bottom .popover-header::before, .popover-dark.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
107+
display: none;
108+
}
109+
110+
.popover-dark.bs-popover-bottom > .arrow::after, .popover-dark.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
111+
border-bottom-color: #343a40;
112+
}

‎bootstrap-v4/popover/dist/css/bootstrap-popover-custom-class.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)