Feature/tooltip (#41)

* feature/tooltip: added pure CSS-based tooltip * feature/tooltip: small optimization * feature/tooltip: finalized tooltip, adapted inspector to last changes
Neofonie · May 16, 2024 · fd2c72b · fd2c72b
1 parent fec9af9
commit fd2c72b
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 37 deletions.
diff --git a/src/lib/components/a11y-inspector.svelte b/src/lib/components/a11y-inspector.svelte
@@ -2,27 +2,19 @@
     import { watchedA11yContent, testA11yRules } from '$lib/helpers/a11y-manager';
     import { onMount } from 'svelte';
 
-    let src = 'https://google.com/';
+    let
+        elmIframe,
+        // The URL to test (initial value).
+        src = 'https://google.com/',
+        // The URL for the proxy-server we're using to bypass CORS-issues.
+        proxy = 'http://localhost:8080/',
+        inputDelay;
 
-    let // The URL for the proxy-server we're using to bypass CORS-issues.
-        proxy = 'http://localhost:8080/';
-    // http://localhost:8080/
-    // https://a11y.neofonie.de/cors/
-
-    let elmIframe, inputDelay;
-
-    // As soon 'src' changes (like when editing text in input.address)
+    // As soon 'src' or 'proxy' changes (like when editing text in any input)
     //  this will be triggered. We use `setTimeout` to delay the input
     //  so loading will happen after the user has stopped typing after
     //  a reasonable time (250ms).
-    $: if (src) {
-        if (inputDelay) {
-            clearTimeout(inputDelay);
-        }
-        inputDelay = setTimeout(() => loadPagePerProxy(), 250);
-    }
-
-    $: if (proxy) {
+    $: if (src || proxy) {
         if (inputDelay) {
             clearTimeout(inputDelay);
         }
@@ -61,11 +53,9 @@
 </script>
 
 <section>
-    <div class="viewport">
-        <input class="address" type="text" bind:value={proxy} />
-        <input class="address" type="text" bind:value={src} />
-        <iframe bind:this={elmIframe} src="" title="a11y-inspector"></iframe>
-    </div>
+    <label title="Proxy URL (must end with '/'!)"><input type="text" bind:value={proxy} /></label>
+    <label title="URL to test"><input type="text" bind:value={src} /></label>
+    <iframe bind:this={elmIframe} src="" title="a11y-inspector"></iframe>
 </section>
 
 <style>
@@ -76,26 +66,38 @@
         box-sizing: border-box;
         padding: 1em;
         position: relative;
-    }
-    div.viewport {
-        width: 100%;
-        height: 100%;
-        position: relative;
         display: flex;
         flex-direction: column;
         gap: 0.5em;
 
-        & > h4 {
-            text-align: center;
+        & > label {
+            width: 100%;
+            position: relative;;
+
+            & > input {
+                width: 100%;
+                border: none;
+                padding: 1em 0.5em;
+                font-size: 1.25em;
+                border-radius: var(---border-radius);
+                background-color: hsl(0deg 0% 0% / 0.05);
+
+                &:focus {
+                    outline: 2px solid var(--color-primary);
+                }
+            }
+            &::after {
+                content: attr(title);
+                position: absolute;
+                top: .25em;
+                left: 1em;
+                font-size: .75em;
+                font-family: var(--font-family-title);
+                color: var(--color-primary);
+                pointer-events: none;
+            }
         }
     }
-    input.address {
-        border: none;
-        padding: 1em 0.5em;
-        font-size: 1.25em;
-        border-radius: var(---border-radius);
-        background-color: hsl(0deg 0% 0% / 0.05);
-    }
     iframe {
         width: 100%;
         height: 100%;

diff --git a/src/lib/components/tooltip.svelte b/src/lib/components/tooltip.svelte
@@ -0,0 +1,82 @@
+<script>
+    export let
+        label = undefined;
+</script>
+
+<span
+    data-tooltip={label}
+>
+    {#if $$slots.default}
+        <slot />
+    {:else}
+        ?
+    {/if}
+</span>
+
+<style>
+    span {
+        ---tooltip-yOffset: calc(-100% + 4px);
+        ---tooltip-animTime: 250ms;
+        ---tooltip-animDelay: 500ms;
+        ---tooltip-animEase: ease-in-out;
+        ---tooltip-anim: var(---tooltip-animTime) var(---tooltip-animDelay) var(---tooltip-animEase);
+        position: relative;
+        font: inherit;
+        font-size: 1.25em;
+        font-weight: bold;
+        background-color: white;
+        border-radius: 50%;
+        display: inline-flex;
+        width: 16px;
+        height: 16px;
+        font-size: 12px;
+        border: 1px solid currentColor;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        vertical-align: top;
+        transform: translateY(12px);
+        cursor: help;
+
+        &::before, &::after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            opacity: 0;
+            transition: transform var(---tooltip-anim), 
+                        opacity var(---tooltip-anim);
+            pointer-events: none;
+            background-color: inherit;
+        }
+        &::before {
+            content: attr(data-tooltip);
+            transform: translate(-14px, calc(var(---tooltip-yOffset) - 10px));
+            font-size: 12px;
+            box-sizing: border-box;
+            border: 1px solid currentColor;
+            padding: .25em;
+            border-radius: 5px;
+            white-space: nowrap;
+            box-shadow: 0 5px 10px -5px hsl(0deg 0% 0% / .25);
+        }
+        &::after {
+            content: '';
+            width: 12px;
+            height: 12px;
+            transform: translate(2px, calc(var(---tooltip-yOffset) - 4px)) rotate(-45deg) skew(-15deg,-15deg);
+            border-left-width: 1px;
+            border-left-style: solid;
+            border-left-color: currentColor;
+            border-bottom-width: 1px;
+            border-bottom-style: solid;
+            border-bottom-color: currentColor;
+        }
+        &:hover {
+            ---tooltip-yOffset: -100%;
+
+            &::before, &::after {
+                opacity: 1;
+            }
+        }
+    }
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -10,6 +10,7 @@
   import ShowCode from '$lib/components/show-code.svelte';
   import SplitPane from '$lib/components/split-pane.svelte';
   import StoredCheckbox from '$lib/components/stored-checkbox.svelte';
+  import Tooltip from '$lib/components/tooltip.svelte';
 </script>
 
 <svelte:head>
@@ -25,7 +26,7 @@
     <div slot="first">
         <div class="container mx-auto px-4 py-4">
             <Headline tag="h1">
-                Test Accessibility „A11y“ (11 stehen für 11 Buchstaben, ergo eine Abkürzung)
+                Test Accessibility „A11y“ <Tooltip label="'11' steht für 11 Buchstaben, ergo für eine Abkürzung" />
             </Headline>
 
             <p>