Skip to content

Commit cb0ca27

Browse files
FrontendlandFrontendland
committed
✨ Add Tooltip component
1 parent e52c1f9 commit cb0ca27

File tree

5 files changed

+195
-1
lines changed

5 files changed

+195
-1
lines changed

‎src/pages/index.astro‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,9 @@ const tabItems = [{
126126
<CardWrapper title="Tabs" href="/tabs">
127127
<Tabs items={tabItems} theme="boxed" />
128128
</CardWrapper>
129+
<CardWrapper title="Tooltip" href="/tooltip">
130+
<p>Tooltip<sup>?</sup></p>
131+
</CardWrapper>
129132
</div>
130133
</Layout>
131134

‎src/pages/tooltip.astro‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
import Layout from '@static/Layout.astro'
3+
import ComponentWrapper from '@static/ComponentWrapper.astro'
4+
5+
import Button from '@components/Button/Button.astro'
6+
7+
const tooltipStyle = [
8+
'--w-tooltip-background: #10ac84',
9+
'--w-tooltip-color:#000'
10+
].join(';')
11+
---
12+
13+
<Layout>
14+
<h1>Tooltip</h1>
15+
<div class="grid md-2 lg-3">
16+
<ComponentWrapper title="Default">
17+
<p data-tooltip="Tooltip content">Default tooltip</p>
18+
</ComponentWrapper>
19+
20+
<ComponentWrapper title="Custom color">
21+
<p data-tooltip="Tooltip content" style={tooltipStyle}>
22+
Colored tooltip
23+
</p>
24+
</ComponentWrapper>
25+
26+
<ComponentWrapper title="Tooltip on button">
27+
<Button data-tooltip="Tooltip content">
28+
Hover me
29+
</Button>
30+
</ComponentWrapper>
31+
32+
<ComponentWrapper title="Bottom position">
33+
<p data-tooltip="Tooltip content" data-position="bottom">
34+
Bottom tooltip
35+
</p>
36+
</ComponentWrapper>
37+
38+
<ComponentWrapper title="Left position">
39+
<p data-tooltip="Tooltip content" data-position="left">
40+
Left tooltip
41+
</p>
42+
</ComponentWrapper>
43+
44+
<ComponentWrapper title="Right position">
45+
<p data-tooltip="Tooltip content" data-position="right">
46+
Right tooltip
47+
</p>
48+
</ComponentWrapper>
49+
</div>
50+
</Layout>

‎src/scss/global.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
@import './global/elements.scss';
2+
@import './global/tooltip.scss';
23
@import './global/utility.scss';

‎src/scss/global/tooltip.scss‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
@import '../config';
2+
3+
@mixin Tooltip() {
4+
[data-tooltip] {
5+
display: inline-block;
6+
position: relative;
7+
8+
&::before,
9+
&::after {
10+
@include Transition();
11+
opacity: 0;
12+
left: 50%;
13+
transform: translate(-50%, 5px);
14+
}
15+
16+
&::before {
17+
content: attr(data-tooltip);
18+
border-radius: 5px;
19+
font-size: 14px;
20+
position: absolute;
21+
background: var(--w-tooltip-background);
22+
color: var(--w-tooltip-color);
23+
padding: 0 5px;
24+
top: -30px;
25+
width: max-content;
26+
line-height: 1.8;
27+
max-width: 300px;
28+
}
29+
30+
&::after {
31+
content: '';
32+
position: absolute;
33+
width: 0;
34+
height: 0;
35+
border-left: 5px solid transparent;
36+
border-right: 5px solid transparent;
37+
border-top: 5px solid var(--w-tooltip-background);
38+
top: -5px;
39+
}
40+
41+
&:hover::before,
42+
&:hover::after {
43+
opacity: 1;
44+
transform: translate(-50%, 0);
45+
}
46+
47+
&[data-position="bottom"] {
48+
&::before,
49+
&::after {
50+
transform: translate(-50%, -5px);
51+
}
52+
53+
&::before {
54+
top: auto;
55+
bottom: -30px;
56+
}
57+
58+
&::after {
59+
border-left: 5px solid transparent;
60+
border-right: 5px solid transparent;
61+
border-top: 5px solid transparent;
62+
border-bottom: 5px solid var(--w-tooltip-background);
63+
top: auto;
64+
bottom: -5px;
65+
}
66+
67+
&:hover::before,
68+
&:hover::after {
69+
transform: translate(-50%, 0);
70+
}
71+
}
72+
73+
&[data-position="left"] {
74+
&::before,
75+
&::after {
76+
transform: translate(0, 0);
77+
left: auto;
78+
right: 105%;
79+
}
80+
81+
&::before {
82+
top: auto;
83+
}
84+
85+
&::after {
86+
border-left: 5px solid var(--w-tooltip-background);
87+
border-right: 5px solid transparent;
88+
border-top: 5px solid transparent;
89+
border-bottom: 5px solid transparent;
90+
top: 50%;
91+
transform: translate(10px, -40%);
92+
}
93+
94+
&:hover::before {
95+
transform: translate(-5px, 0);
96+
}
97+
98+
&:hover::after {
99+
transform: translate(5px, -40%);
100+
}
101+
}
102+
103+
&[data-position="right"] {
104+
&::before,
105+
&::after {
106+
transform: translate(0, 0);
107+
left: 105%;
108+
}
109+
110+
&::before {
111+
top: auto;
112+
}
113+
114+
&::after {
115+
border-left: 5px solid transparent;
116+
border-right: 5px solid var(--w-tooltip-background);
117+
border-top: 5px solid transparent;
118+
border-bottom: 5px solid transparent;
119+
top: 50%;
120+
transform: translate(-10px, -40%);
121+
}
122+
123+
&:hover::before {
124+
transform: translate(5px, 0);
125+
}
126+
127+
&:hover::after {
128+
transform: translate(-5px, -40%);
129+
}
130+
}
131+
}
132+
}
133+

‎src/scss/setup.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
$config: (
44
includeResets: true,
55
includeHelperClasses: true,
6-
includeElementStyles: true
6+
includeElementStyles: true,
7+
includeTooltip: true
78
);
89

910
:root {
@@ -20,6 +21,8 @@ $config: (
2021
--w-spinner-speed: 2s;
2122
--w-spinner-size: 30px;
2223
--w-spinner-dash: 8;
24+
--w-tooltip-background: #FFF;
25+
--w-tooltip-color: #000;
2326
}
2427

2528
@function config($key) {
@@ -40,4 +43,8 @@ $config: (
4043
@if (config('includeElementStyles')) {
4144
@include Elements();
4245
}
46+
47+
@if (config('includeTooltip')) {
48+
@include Tooltip();
49+
}
4350
}

0 commit comments

Comments
 (0)