Skip to content

Commit 281ccdf

Browse files
alterebroalterebro
committed
Create a variables settings block
1 parent 0107e88 commit 281ccdf

File tree

5 files changed

+105
-78
lines changed

5 files changed

+105
-78
lines changed

‎dist/css-tooltip.css

+19-17
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
[data-tooltip] {
22
position: relative;
33
display: inline-block; }
4-
[data-tooltip]:after, [data-tooltip]:before {
4+
[data-tooltip]:before, [data-tooltip]:after {
55
position: absolute;
66
left: 50%;
77
transform: translate(-50%, -12px);
@@ -13,42 +13,44 @@
1313
user-select: none;
1414
opacity: 0;
1515
transition: opacity .35s ease .25s; }
16-
[data-tooltip]:after {
16+
[data-tooltip]:before {
1717
content: attr(data-tooltip);
18-
background: rgba(0, 0, 0, 0.75);
19-
color: #fff;
18+
background: #333;
19+
color: #eee;
2020
padding: 12px;
2121
white-space: nowrap;
22-
bottom: 100%; }
23-
[data-tooltip]:before {
22+
bottom: 100%;
23+
border-radius: 3px;
24+
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.65); }
25+
[data-tooltip]:after {
2426
content: '';
2527
background: transparent;
2628
border: 8px solid transparent;
27-
border-top-color: rgba(0, 0, 0, 0.75); }
28-
[data-tooltip]:hover:after, [data-tooltip]:hover:before, [data-tooltip]:focus:after, [data-tooltip]:focus:before, [data-tooltip]:active:after, [data-tooltip]:active:before {
29+
border-top-color: #333; }
30+
[data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, [data-tooltip]:active:before, [data-tooltip]:active:after {
2931
opacity: 1; }
30-
[data-tooltip].tooltip-multiline:after {
32+
[data-tooltip].tooltip-multiline:before {
3133
width: 100vw;
3234
max-width: 240px;
3335
white-space: normal; }
34-
[data-tooltip][class*="tooltip-bottom"]:after, [data-tooltip][class*="tooltip-bottom"]:before {
36+
[data-tooltip][class*="tooltip-bottom"]:before, [data-tooltip][class*="tooltip-bottom"]:after {
3537
transform: translate(-50%, 12px); }
36-
[data-tooltip][class*="tooltip-bottom"]:after {
38+
[data-tooltip][class*="tooltip-bottom"]:before {
3739
bottom: auto;
3840
top: 100%; }
39-
[data-tooltip][class*="tooltip-bottom"]:before {
41+
[data-tooltip][class*="tooltip-bottom"]:after {
4042
bottom: 0;
4143
border: 8px solid transparent;
42-
border-bottom-color: rgba(0, 0, 0, 0.75); }
43-
[data-tooltip].tooltip-bottom-left:after {
44+
border-bottom-color: #333; }
45+
[data-tooltip].tooltip-bottom-left:before {
4446
transform: translate(-24px, 12px); }
45-
[data-tooltip].tooltip-bottom-right:after {
47+
[data-tooltip].tooltip-bottom-right:before {
4648
left: auto;
4749
right: 50%;
4850
transform: translate(24px, 12px); }
49-
[data-tooltip].tooltip-top-left:after {
51+
[data-tooltip].tooltip-top-left:before {
5052
transform: translate(-24px, -12px); }
51-
[data-tooltip].tooltip-top-right:after {
53+
[data-tooltip].tooltip-top-right:before {
5254
left: auto;
5355
right: 50%;
5456
transform: translate(24px, -12px); }

‎dist/css-tooltip.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+24-8
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,28 @@
55
<title>CSS Tooltip</title>
66
<link rel="stylesheet" href="dist/css-tooltip.min.css" />
77
<style media="screen">
8-
html, body {
9-
margin: 1rem;
8+
html {}
9+
body {
10+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
11+
font-size: 1rem;
12+
font-weight: 500;
13+
line-height: 1.6;
14+
width: 90%;
15+
max-width: 42rem;
16+
margin: 3rem auto;
17+
}
18+
h1 {
19+
font-size: 150%;
20+
font-weight: 500;
21+
border-bottom: solid #ddd 1px;
1022
}
1123
[data-tooltip]{
1224
border-bottom: dotted #999 1px;
1325
}
26+
[data-tooltip]:before {
27+
font-weight: 300;
28+
font-size: 80%;
29+
}
1430
</style>
1531
</head>
1632
<body>
@@ -19,19 +35,19 @@ <h1>CSS Tooltip</h1>
1935
<p>Lorem ipsum dolor sit amet. Sample <span data-tooltip="Tooltip is visible on this element">tooltip span here</span>, but not here... </p>
2036
<blockquote>
2137
<p>
22-
Lorem ipsum dolor sit amet ... <a href="#" data-tooltip="Lorem ipsum dolor sit amet...">tootltip</a>
38+
Lorem ipsum dolor sit amet ... <a href="" data-tooltip="Lorem ipsum dolor sit amet...">tootltip</a>
2339
</p>
2440
</blockquote>
2541
<p>
2642

27-
<br> ... <a href="#" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae augue maximus" class="tooltip-multiline tooltip-bottom">tootltip multiline, tooltip bottom</a>
28-
/ <a href="#" data-tooltip="Lorem ipsum dolor sit amet..." class="tooltip-bottom-right">tootltip (bottom right)</a>
29-
<br><a href="#" data-tooltip="Lorem ipsum dolor sit amet..." class="tooltip-bottom-left">tootltip (bottom left)</a>
43+
<br> ... <a href="" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae augue maximus" class="tooltip-multiline tooltip-bottom">tootltip multiline, tooltip bottom</a>
44+
/ <a href="" data-tooltip="Lorem ipsum dolor sit amet..." class="tooltip-bottom-right">tootltip (bottom right)</a>
45+
<br><a href="" data-tooltip="Lorem ipsum dolor sit amet..." class="tooltip-bottom-left">tootltip (bottom left)</a>
3046
</p>
3147

3248
<ul>
33-
<li><a href="#" data-tooltip="Lorem ipsum dolor sit amet" class="tooltip-top">Tooltip top (default)</a></li>
34-
<li><a href="#" data-tooltip="Lorem ipsum dolor sit amet" class="tooltip-top-left">Tooltip top left</a> / ... / <a href="#" data-tooltip="Lorem ipsum dolor sit amet" class="tooltip-top-right">Tooltip top right</a></li>
49+
<li><a href="" data-tooltip="Lorem ipsum dolor sit amet" class="tooltip-top">Tooltip top (default)</a></li>
50+
<li><a href="" data-tooltip="Lorem ipsum dolor sit amet" class="tooltip-top-left">Tooltip top left</a> / ... / <a href="" data-tooltip="Lorem ipsum dolor sit amet" class="tooltip-top-right">Tooltip top right</a></li>
3551
</ul>
3652

3753

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
}
2020
},
2121
"scripts": {
22-
"build": "gulp build",
22+
"build": "rm -rf dist && gulp build",
2323
"watch": "gulp watch"
2424
},
2525
"keywords": [],

‎src/css-tooltip.scss

+60-51
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1-
$background-color : rgba(0, 0, 0, .75);
2-
$foreground-color : #fff;
3-
$arrow-size : 8px;
4-
$vertical-shift : 12px;
5-
$multiline-width : 240px;
6-
$tooltip-padding: 12px;
1+
2+
$background-color : #333;
3+
$foreground-color : #eee;
4+
$arrow-size : 8px;
5+
$vertical-shift : 12px;
6+
$multiline-width : 240px;
7+
$tooltip-padding : 8px 12px;
8+
$roundness : 3px; // 0 || border-radius
9+
$shadow : 0 5px 15px -5px rgba(0, 0, 0, .65); // 0 || box-shadow
10+
$load-styles : true !default; // Extra styles needed?
711

812
[data-tooltip] {
913

1014
position: relative;
1115
display: inline-block;
1216

13-
&:after, &:before {
17+
&:before, &:after {
1418
position: absolute;
1519
left: 50%;
1620
transform: translate(-50%, -$vertical-shift);
@@ -22,17 +26,19 @@ $tooltip-padding: 12px;
2226
}
2327

2428
// Tooltip Body
25-
&:after {
29+
&:before {
2630
content: attr(data-tooltip);
2731
background: $background-color;
2832
color: $foreground-color;
2933
padding: $tooltip-padding;
3034
white-space: nowrap;
3135
bottom: 100%;
36+
@if ($roundness != 0) { border-radius: $roundness; }
37+
@if ($shadow != 0) { box-shadow: $shadow; }
3238
}
3339

3440
// Tooltip Arrow
35-
&:before {
41+
&:after {
3642
content: '';
3743
background: transparent;
3844
border: $arrow-size solid transparent;
@@ -41,56 +47,59 @@ $tooltip-padding: 12px;
4147

4248
// Active state
4349
&:hover, &:focus, &:active {
44-
&:after, &:before {
50+
&:before, &:after {
4551
opacity: 1
4652
}
4753
}
4854

49-
// ----------------------------------------------------
50-
// Extra Styles :
51-
// Multi-line tooltip (.tooltip-multiline)
52-
&.tooltip-multiline {
53-
&:after {
54-
width: 100vw;
55-
max-width: $multiline-width;
56-
white-space: normal;
55+
@if $load-styles == true {
56+
// ----------------------------------------------------
57+
// Extra Styles :
58+
// Multi-line tooltip (.tooltip-multiline)
59+
&.tooltip-multiline {
60+
&:before {
61+
width: 100vw;
62+
max-width: $multiline-width;
63+
white-space: normal;
64+
}
5765
}
58-
}
5966

60-
// ----------
61-
// Bottom tooltip (.tooltip-bottom, *-left, *-right )
62-
&[class*="tooltip-bottom"] {
63-
&:after, &:before { transform: translate(-50%, $vertical-shift) }
64-
&:after {
65-
bottom: auto;
66-
top: 100%;
67+
// ----------
68+
// Bottom tooltip (.tooltip-bottom, *-left, *-right )
69+
&[class*="tooltip-bottom"] {
70+
&:before, &:after { transform: translate(-50%, $vertical-shift) }
71+
&:before {
72+
bottom: auto;
73+
top: 100%;
74+
}
75+
&:after {
76+
bottom: 0;
77+
border: $arrow-size solid transparent;
78+
border-bottom-color: $background-color;
79+
}
6780
}
68-
&:before {
69-
bottom: 0;
70-
border: $arrow-size solid transparent;
71-
border-bottom-color: $background-color;
81+
&.tooltip-bottom-left:before {
82+
transform: translate(-($arrow-size*3), $vertical-shift);
83+
}
84+
&.tooltip-bottom-right:before {
85+
left: auto;
86+
right: 50%;
87+
transform: translate($arrow-size*3, $vertical-shift);
7288
}
73-
}
74-
&.tooltip-bottom-left:after {
75-
transform: translate(-($arrow-size*3), $vertical-shift);
76-
}
77-
&.tooltip-bottom-right:after {
78-
left: auto;
79-
right: 50%;
80-
transform: translate($arrow-size*3, $vertical-shift);
81-
}
8289

83-
// ----------
84-
// Top tooltip (.tooltip-top, *-left, *-right )
85-
// .tooltip-top not needed (default style)
86-
&.tooltip-top-left:after {
87-
transform: translate(-($arrow-size*3), -$vertical-shift);
88-
}
89-
&.tooltip-top-right:after {
90-
left: auto;
91-
right: 50%;
92-
transform: translate( $arrow-size*3, -$vertical-shift);
90+
// ----------
91+
// Top tooltip (.tooltip-top, *-left, *-right )
92+
// .tooltip-top not needed (default style)
93+
&.tooltip-top-left:before {
94+
transform: translate(-($arrow-size*3), -$vertical-shift);
95+
}
96+
&.tooltip-top-right:before {
97+
left: auto;
98+
right: 50%;
99+
transform: translate( $arrow-size*3, -$vertical-shift);
100+
}
101+
// End extra styles
102+
// ----------------------------------------------------
93103
}
94-
// End extra styles
95-
// ----------------------------------------------------
104+
96105
}

0 commit comments

Comments
 (0)