8000 Remove default tooltip styling · zvizvi/css-tooltip@82878ba · GitHub
Skip to content

Commit 82878ba

Browse files
alterebroalterebro
committed
Remove default tooltip styling
1 parent 590dd38 commit 82878ba

File tree

4 files changed

+32
-14
lines changed

4 files changed

+32
-14
lines changed

‎dist/css-tooltip.css

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
[data-tooltip] {
2+
23
--bg-color : #eee;
34
--fg-color : #333;
45

@@ -21,24 +22,31 @@
2122
transition: opacity .35s ease .25s;
2223
}
2324

25+
/* Body */
26+
2427
[data-tooltip]:after {
2528
content: attr(data-tooltip);
26-
bottom: 100%;
2729
background: var(--bg-color);
2830
color: var(--fg-color);
2931
padding: 12px;
30-
border-radius: 4px;
31-
width: 240px;
32-
font-size: 14px;
32+
bottom: 100%;
33+
/* border-radius: 4px; */
34+
/* width: 240px; */
35+
/* font-size: 14px;
3336
font-weight: 400;
34-
line-height: 1.5;
37+
line-height: 1.5; */
38+
white-space: nowrap;
3539
}
3640

41+
/* Arrow */
42+
3743
[data-tooltip]:before {
3844
content: '';
3945
background: transparent;
4046
border: 8px solid transparent;
4147
border-top-color: var(--bg-color);
4248
}
4349

44-
[data-tooltip]:hover:after, [data-tooltip]:hover:before, [data-tooltip]:focus:after, [data-tooltip]:focus:before, [data-tooltip]:active:after, [data-tooltip]:active:before { opacity: 1 }
50+
[data-tooltip]:hover:after, [data-tooltip]:hover:before, [data-tooltip]:focus:after, [data-tooltip]:focus:before, [data-tooltip]:active:after, [data-tooltip]:active:before {
51+
opacity: 1
52+
}

‎dist/css-tooltip.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.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
}
1414
},
1515
"scripts": {
16-
"test": "echo \"Error: no test specified\" && exit 1"
16+
"build": "gulp build",
17+
"watch": "gulp watch"
1718
},
1819
"keywords": [],
1920
"author": "",

‎src/css-tooltip.css

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
[data-tooltip] {
2+
23
--bg-color : #eee;
34
--fg-color : #333;
45

@@ -15,25 +16,33 @@
1516
opacity: 0;
1617
transition: opacity .35s ease .25s;
1718
}
19+
20+
/* Body */
1821
&:after {
1922
content: attr(data-tooltip);
20-
bottom: 100%;
2123
background: var(--bg-color);
2224
color: var(--fg-color);
2325
padding: 12px;
24-
border-radius: 4px;
25-
width: 240px;
26-
font-size: 14px;
26+
bottom: 100%;
27+
/* border-radius: 4px; */
28+
/* width: 240px; */
29+
/* font-size: 14px;
2730
font-weight: 400;
28-
line-height: 1.5;
31+
line-height: 1.5; */
32+
white-space: nowrap;
2933
}
34+
35+
/* Arrow */
3036
&:before {
3137
content: '';
3238
background: transparent;
3339
border: 8px solid transparent;
3440
border-top-color: var(--bg-color);
3541
}
42+
3643
&:hover, &:focus, &:active {
37-
&:after, &:before { opacity: 1 }
44+
&:after, &:before {
45+
opacity: 1
46+
}
3847
}
3948
}

0 commit comments

Comments
 (0)