finxol.io
Personal blog
finxol.io
blog
feat: add tooltip to country tag
+52
-7
+52
-7
app/components/Country.vue
+52
-7
app/components/Country.vue
···
17
17
18
18
<template>
19
19
<div v-if="data" class="hidden md:flex flex-row items-center gap-2">
20
-
<span>
21
-
Currently in:
22
-
</span>
23
-
<div class="flex flex-row items-center gap-2 bg-stone-200/50 dark:bg-stone-700/60 py-1 px-2 rounded-lg">
24
-
<span>
20
+
<div class="tooltip-target flex flex-row items-center gap-2 bg-stone-200/50 dark:bg-stone-700/60 py-1 px-2 rounded-lg">
21
+
I'm in
22
+
<span class="flex flex-row items-center gap-2 font-bold">
25
23
{{ emoji }}
26
-
</span>
27
-
<span>
28
24
{{ country }}
29
25
</span>
26
+
!
27
+
</div>
28
+
29
+
<div class="anchored-tooltip">
30
+
This gets automatically updated as I move around!
30
31
</div>
31
32
</div>
32
33
</template>
34
+
35
+
<style scoped>
36
+
.tooltip-target:hover + .anchored-tooltip {
37
+
display: block;
38
+
}
39
+
40
+
.tooltip-target {
41
+
anchor-name: --infobox;
42
+
}
43
+
44
+
.anchored-tooltip {
45
+
@apply text-stone-200;
46
+
47
+
--bg-color: oklch(0.3272 0.0197 88.15 / 80%);
48
+
49
+
display: none;
50
+
51
+
position-anchor: --infobox;
52
+
position: absolute;
53
+
margin: 0;
54
+
top: calc(anchor(top) + 3rem);
55
+
left: calc(anchor(center));
56
+
transform: translateX(-50%);
57
+
bottom: anchor(bottom);
58
+
height: fit-content;
59
+
width: fit-content;
60
+
max-width: 15rem;
61
+
padding: 0.5rem 1rem;
62
+
text-align: center;
63
+
background-color: var(--bg-color);
64
+
border-radius: 0.5rem;
65
+
66
+
&::before {
67
+
content: "";
68
+
position: absolute;
69
+
top: -10px;
70
+
left: 50%;
71
+
transform: translateX(-50%) rotate(180deg);
72
+
border-width: 10px 10px 0 10px;
73
+
border-style: solid;
74
+
border-color: var(--bg-color) transparent transparent transparent;
75
+
}
76
+
}
77
+
</style>