Finished floating links

Finished positioning of floating links on desktop and mobile
Added hover tooltips to floating links

src/components/ContactButton.jsx

@@ -5,9 +5,26 @@ import * as React from "react"
 import { Button } from "./ui/button"
 import { cn } from '../lib/utils'
 import { icons } from "../lib/icons"
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "./ui/tooltip"
 
-export function ContactButton({variant, link}) {
+export function ContactButton({ variant, link, tooltip }) {
     return (
-        <a href={link} target="_blank"><Button id={`${variant}Btn`} variant="outline" size="icon" className={cn("bg-inherit border-none text-content hover:text-bkg p-1 justify-center")}  dangerouslySetInnerHTML={{ __html: icons[variant] }} /></a>
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger>
+                    <a href={link} target="_blank">
+                        <Button id={`${variant}Btn`} variant="outline" size="icon" className={cn("bg-inherit border-none text-content hover:text-bkg p-1 justify-center")} dangerouslySetInnerHTML={{ __html: icons[variant] }} />
+                    </a>
+                    </TooltipTrigger>
+                <TooltipContent>
+                    <p>{tooltip}</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
     )
 }

src/components/FloatingLinks.astro

@@ -0,0 +1,13 @@
+---
+import { ContactButton } from "./ContactButton";
+---
+
+<!-- Contacts list -->
+<div>
+    <div class="relative top-[97vh] left-[30vw] z-[1000] sm:fixed sm:left-2 sm:top-[40%] flex sm:flex-col text-lg text-content" >
+        <ContactButton variant={"matrix"} link={"https://matrix.to/#/@cyril:cyrilsebek.cz"} tooltip={"Matrix Chat"} client:load/>
+        <ContactButton variant={"telegram"} link={"https://t.me/blboun3"} tooltip={"Telegram Chat"} client:load/>
+        <ContactButton variant={"github"} link={"https://github.com/Blboun3"} tooltip={"Github"} client:load/>
+        <ContactButton variant={"git"} link={"https://git.cyrilsebek.cz/blboun3"} tooltip={"Selfhosted gitea"} client:load/>
+    </div>
+</div>

src/components/Hero.astro

@@ -2,19 +2,11 @@
 import SinglePage from "../layouts/SinglePage.astro";
 import { getLangFromUrl, useTranslations } from "../i18n/utils";
 import { ContactForm } from "./ContactForm";
-import { ContactButton } from "./ContactButton";
 
 const t = useTranslations(getLangFromUrl(Astro.url))
 ---
 
 <SinglePage>
-    <!-- Contacts list -->
-    <div class="fixed left-0 top-[40%] flex flex-col text-lg text-content">
-        <ContactButton variant={"matrix"} link="https://matrix.to/#/@cyril:cyrilsebek.cz" />
-        <ContactButton variant={"telegram"} link="https://t.me/blboun3" />
-        <ContactButton variant={"github"} link="https://github.com/Blboun3" />
-        <ContactButton variant={"git"} link="https://git.cyrilsebek.cz/blboun3" />
-    </div>
     <!-- Hero Image -->
     <div class="w-full flex justify-center mt-20 ">
         <img src={t("hero").image} alt="" class="rounded-full w-[200px] h-[200px]" />
@@ -39,7 +31,7 @@ const t = useTranslations(getLangFromUrl(Astro.url))
         </button>
         <ContactForm currentLocale={Astro.currentLocale} client:load />
     </div>
-    <script client:load is:inline>
+    <script is:inline>
         function linkToBlog() {
             document.getElementById("blogBtn").click()
         }

src/components/ui/tooltip.jsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "../../lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props} />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }