commit 94135b3a13729092ab89bf0f86fe80af52eb8b92 · finxol.io/blog

+52 -7

app/components/Country.vue

···

       17
        
       

     

       18
        
       <template>

     

       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>

     

       25
        
                       {{ emoji }}

     

       26
       -
                   </span>

     

       27
       -
                   <span>

     

       28
        
                       {{ country }}

     

       29
        
                   </span>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       30
        
               </div>

     

       31
        
           </div>

     

       32
        
       </template>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0

···

       17
        
       

     

       18
        
       <template>

     

       19
        
           <div v-if="data" class="hidden md: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">

     

       0
        
       
     

       0
        
       
     

       23
        
                       {{ emoji }}

     

       0
        
       
     

       0
        
       
     

       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
       +
           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>