finxol.io
1<script setup lang="ts">
2const data = await $fetch("https://hook.finxol.io/sensors/country")
3 .then((res) => {
4 return res as {
5 country: string;
6 country_code: string;
7 country_flag: string;
8 };
9 })
10 .catch((e) => {
11 console.error(e);
12 });
13
14const country = data?.country;
15const emoji = data?.country_flag;
16</script>
17
18<template>
19 <div v-if="data" class="hidden sm:flex flex-row items-center gap-2">
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">
23 {{ emoji }}
24 {{ country }}
25 </span>
26 !
27 </div>
28
29 <div class="anchored-tooltip">
30 This gets automatically updated as I move around!
31 </div>
32 </div>
33</template>
34
35<style scoped>
36.tooltip-target:hover + .anchored-tooltip,
37.anchored-tooltip:hover {
38 @supports (anchor-name: --infobox) {
39 display: block;
40 }
41}
42
43.tooltip-target {
44 anchor-name: --infobox;
45}
46
47.anchored-tooltip {
48 @apply text-stone-200;
49
50 --bg-color: oklch(0.2685 0.0063 34.3 / 70%); /* bg-stone-800/70 */
51
52 display: none;
53
54 position-anchor: --infobox;
55 position: absolute;
56 margin: 0;
57 top: calc(anchor(top) + 2.7rem);
58 left: calc(anchor(center));
59 transform: translateX(-50%);
60 bottom: anchor(bottom);
61 height: fit-content;
62 width: fit-content;
63 max-width: 15rem;
64 padding: 0.5rem 1rem;
65 text-align: center;
66 background-color: var(--bg-color);
67 border-radius: 0.5rem;
68 animation: fade-in 200ms ease-in-out;
69
70 &::before {
71 content: "";
72 position: absolute;
73 top: -10px;
74 left: 50%;
75 transform: translateX(-50%) rotate(180deg);
76 border-width: 10px 10px 0 10px;
77 border-style: solid;
78 border-color: var(--bg-color) transparent transparent transparent;
79 }
80
81 @keyframes fade-in {
82 from {
83 opacity: 0;
84 transform: translateX(-50%) translateY(-10px);
85 }
86 to {
87 opacity: 1;
88 transform: translateX(-50%) translateY(0);
89 }
90 }
91}
92</style>