Add partners tooltips

src/lib/SvelteTooltip.svelte

@@ -0,0 +1,91 @@
+<script>
+  export let tip = "";
+  export let top = false;
+  export let right = false;
+  export let bottom = false;
+  export let left = false;
+  export let active = false;
+  export let color = "#393F67";
+
+  let style = `background-color: ${color};`;
+</script>
+
+<div class="tooltip-wrapper">
+  <span class="tooltip-slot">
+    <slot />
+  </span>
+  <div
+    class="tooltip"
+    class:active
+    class:left
+    class:right
+    class:bottom
+    class:top
+  >
+    {#if tip}
+      <div class="default-tip" {style}>{@html tip}</div>
+    {:else}
+      <slot name="custom-tip" />
+    {/if}
+  </div>
+</div>
+
+<style>
+  .tooltip-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+  .tooltip {
+    position: absolute;
+    font-family: inherit;
+    display: inline-block;
+    white-space: nowrap;
+    color: white;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 150ms, visibility 150ms;
+    z-index: 1;
+  }
+
+  .default-tip {
+    display: inline-block;
+    padding: 8px 16px;
+    border-radius: 2em;
+    color: inherit;
+  }
+
+  .tooltip.top {
+    left: 50%;
+    transform: translate(-50%, -100%);
+    margin-top: -8px;
+  }
+
+  .tooltip.bottom {
+    left: 50%;
+    bottom: 0;
+    transform: translate(-50%, 100%);
+    margin-bottom: -8px;
+  }
+
+  .tooltip.left {
+    left: 0;
+    transform: translateX(-100%);
+    margin-left: -8px;
+  }
+
+  .tooltip.right {
+    right: 0;
+    transform: translateX(100%);
+    margin-right: -8px;
+  }
+
+  .tooltip.active {
+    opacity: 1;
+    visibility: initial;
+  }
+
+  .tooltip-slot:hover + .tooltip {
+    opacity: 1;
+    visibility: initial;
+  }
+</style>

src/routes/index.svelte

@@ -7,6 +7,7 @@
   import Avatar from "$lib/Avatar.svelte";
   import SvelteMarkdown from "svelte-markdown";
   import Link from "$lib/Link.svelte";
+  import SvelteTooltip from "$lib/SvelteTooltip.svelte";
   const renderers = { link: Link };
 
   let onlyLead = true;
@@ -160,13 +161,13 @@
     <div class="mt-6 text-center">Sponzoři</div>
     <div class="mt-6 flex flex-wrap gap-8 justify-center">
       {#each $bundle.spec.partners.filter((p) => p.type === "sponsor") as p}
-        <div class="w-28">
+        <div class="w-32">
           <a href={p.web.url} target="_blank"
             ><Avatar
               speaker={p}
               col="partners"
               size="custom"
-              customSize="w-24 shadow-xl"
+              customSize="w-28 shadow-xl"
             /></a
           >
           <div class="text-center text-sm uppercase font-bold">{p.name}</div>
@@ -177,20 +178,22 @@
     <div class="mt-6 flex flex-wrap gap-6 justify-center">
       {#each $bundle.spec.partners.filter((p) => p.type === "community") as p}
         <div>
-          <a
-            href={p.web
-              ? p.web.url
-              : p.twitter
-              ? `https://twitter.com/${p.twitter}`
-              : ""}
-            target="_blank"
-            ><Avatar
-              speaker={p}
-              col="partners"
-              size="custom"
-              customSize="w-20 shadow-lg"
-            /></a
-          >
+          <SvelteTooltip tip={p.name}>
+            <a
+              href={p.web
+                ? p.web.url
+                : p.twitter
+                ? `https://twitter.com/${p.twitter}`
+                : ""}
+              target="_blank"
+              ><Avatar
+                speaker={p}
+                col="partners"
+                size="custom"
+                customSize="w-20 shadow-lg"
+              /></a
+            >
+          </SvelteTooltip>
         </div>
       {/each}
     </div>
@@ -198,20 +201,22 @@
     <div class="mt-6 flex flex-wrap gap-4 justify-center">
       {#each $bundle.spec.partners.filter((p) => p.type === "medium") as p}
         <div>
-          <a
-            href={p.web
-              ? p.web.url
-              : p.twitter
-              ? `https://twitter.com/${p.twitter}`
-              : ""}
-            target="_blank"
-            ><Avatar
-              speaker={p}
-              col="partners"
-              size="custom"
-              customSize="w-16 shadow-lg"
-            /></a
-          >
+          <SvelteTooltip tip={p.name}>
+            <a
+              href={p.web
+                ? p.web.url
+                : p.twitter
+                ? `https://twitter.com/${p.twitter}`
+                : ""}
+              target="_blank"
+              ><Avatar
+                speaker={p}
+                col="partners"
+                size="custom"
+                customSize="w-16 shadow-lg"
+              /></a
+            >
+          </SvelteTooltip>
         </div>
       {/each}
     </div>