commit 552fa833ec4d71b118fd0880fad2e62db573c95d · finxol.io/blog

+20 -5
app/components/Country.vue
···

       16
       16
        
       </script>

     

       17
       17
        
       

     

       18
       18
        
       <template>

     

       19
       19
       -
           <div v-if="data" class="hidden md:flex flex-row items-center gap-2">

     

       19
       19
       +
           <div v-if="data" class="hidden sm:flex flex-row items-center gap-2">

     

       20
       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
       21
        
                   I'm in

     

       22
       22
        
                   <span class="flex flex-row items-center gap-2 font-bold">

     
···

       33
       33
        
       </template>

     

       34
       34
        
       

     

       35
       35
        
       <style scoped>

     

       36
       36
       -
       .tooltip-target:hover + .anchored-tooltip {

     

       37
       37
       -
           display: block;

     

       36
       36
       +
       .tooltip-target:hover + .anchored-tooltip,

     

       37
       37
       +
       .anchored-tooltip:hover {

     

       38
       38
       +
           @supports (anchor-name: --infobox) {

     

       39
       39
       +
               display: block;

     

       40
       40
       +
           }

     

       38
       41
        
       }

     

       39
       42
        
       

     

       40
       43
        
       .tooltip-target {

     
···

       44
       47
        
       .anchored-tooltip {

     

       45
       48
        
           @apply text-stone-200;

     

       46
       49
        
       

     

       47
       47
       -
           --bg-color: oklch(0.3272 0.0197 88.15 / 80%);

     

       50
       50
       +
           --bg-color: oklch(0.2685 0.0063 34.3 / 70%); /* bg-stone-800/70 */

     

       48
       51
        
       

     

       49
       52
        
           display: none;

     

       50
       53
        
       

     

       51
       54
        
           position-anchor: --infobox;

     

       52
       55
        
           position: absolute;

     

       53
       56
        
           margin: 0;

     

       54
       54
       -
           top: calc(anchor(top) + 3rem);

     

       57
       57
       +
           top: calc(anchor(top) + 2.7rem);

     

       55
       58
        
           left: calc(anchor(center));

     

       56
       59
        
           transform: translateX(-50%);

     

       57
       60
        
           bottom: anchor(bottom);

     
···

       62
       65
        
           text-align: center;

     

       63
       66
        
           background-color: var(--bg-color);

     

       64
       67
        
           border-radius: 0.5rem;

     

       68
       68
       +
           animation: fade-in 200ms ease-in-out;

     

       65
       69
        
       

     

       66
       70
        
           &::before {

     

       67
       71
        
               content: "";

     
···

       72
       76
        
               border-width: 10px 10px 0 10px;

     

       73
       77
        
               border-style: solid;

     

       74
       78
        
               border-color: var(--bg-color) transparent transparent transparent;

     

       79
       79
       +
           }

     

       80
       80
       +
       

     

       81
       81
       +
           @keyframes fade-in {

     

       82
       82
       +
               from {

     

       83
       83
       +
                   opacity: 0;

     

       84
       84
       +
                   transform: translateX(-50%) translateY(-10px);

     

       85
       85
       +
               }

     

       86
       86
       +
               to {

     

       87
       87
       +
                   opacity: 1;

     

       88
       88
       +
                   transform: translateX(-50%) translateY(0);

     

       89
       89
       +
               }

     

       75
       90
        
           }

     

       76
       91
        
       }

     

       77
       92
        
       </style>