wip

Author: nunowar

public/www/assets/bg-pest-4.jpg

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Exo:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap');
 @import 'tailwindcss';
 @plugin 'tailwindcss-motion';
 
@@ -13,6 +13,10 @@
     --font-title: 'Exo', sans-serif;
 }
 
+button {
+  @apply cursor-pointer;
+}
+
 .bg-pest {
     background-image: url('/assets/bg-pest-4.jpg');
 }
@@ -38,3 +42,19 @@
     0%{transform:translate3d(0,0,0)}
     100%{transform:translate3d(-50%,0,0)}
 }
+
+[data-tippy-root]{max-width:calc(100vw - 10px)}
+.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}
+.tippy-box{ @apply bg-blue-950; text-align:center;position:relative;color:#fff;border-radius:8px;font-size:13px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}
+.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}
+.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-6px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}
+.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}
+.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-6px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}
+.tippy-box[data-placement^=left]>.tippy-arrow{right:0}
+.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-6px;transform-origin:center left}
+.tippy-box[data-placement^=right]>.tippy-arrow{left:0}
+.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-6px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}
+.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}
+.tippy-arrow{width:16px;height:16px; @apply text-blue-950;}
+.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}
+.tippy-content{position:relative;padding:5px 9px;z-index:1}

resources/www/index.html

@@ -1,6 +1,13 @@
 import './main.css'
 
 import Alpine from 'alpinejs'
+import tippy from 'tippy.js'
+
+document.addEventListener('alpine:init', () => {
+    Alpine.directive('tooltip', (el, { expression }) => {
+        tippy(el, { content: expression });
+    });
+});
 
 window.Alpine = Alpine
 Alpine.start()

resources/www/main.css

@@ -16,6 +16,7 @@
     "@tailwindcss/postcss": "^4.1.12",
     "alpinejs": "^3.14.9",
     "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.12"
+    "tailwindcss": "^4.1.12",
+    "tippy.js": "^6.3.7"
   }
 }