fix: add tooltip info on what an instance is (#1175)

src/routes/_components/Tooltip.html

@@ -0,0 +1,72 @@
+<!-- Simple tooltip styled to look like an abbr.
+     Modeled after https://github.com/nico3333fr/van11y-accessible-simple-tooltip-aria
+-->
+<span class="tooltip-button"
+      aria-describedby="tooltip-{id}"
+      role="button"
+      tabindex="0"
+      on:mouseover="set({shown: true, mouseover: true})"
+      on:mouseleave="set({shown: false, mouseover: false})"
+      on:click="toggle(event)"
+      on:keydown="onKeydown(event)"
+>
+  {text}
+</span>
+<span id="tooltip-{id}"
+      class="tooltip {shown ? 'shown' : ''}"
+      role="tooltip"
+      aria-hidden={!shown}
+>
+  {tooltipText}
+</span>
+<style>
+  .tooltip-button {
+    border-bottom: 1px dotted;
+  }
+  .tooltip {
+    display: none;
+    position: absolute;
+    background: var(--tooltip-bg);
+    color: var(--tooltip-color);
+    padding: 5px 10px;
+    font-size: 0.9em;
+    border-radius: 4px;
+  }
+  .tooltip.shown {
+    display: inline-block;
+  }
+
+  @media (max-width: 767px) {
+    .tooltip {
+      left: 0;
+      transform: translateY(calc(-100% - 5px));
+    }
+  }
+
+</style>
+<script>
+  let counter = 0
+
+  export default {
+    data: () => ({
+      id: ++counter,
+      shown: false,
+      mouseover: false
+    }),
+    methods: {
+      toggle (e) {
+        e.preventDefault()
+        e.stopPropagation()
+        let { shown, mouseover } = this.get()
+        if (!mouseover) {
+          this.set({ shown: !shown })
+        }
+      },
+      onKeydown (e) {
+        if (e.keyCode === 32 || e.keyCode === 13) { // enter or space
+          this.toggle(e)
+        }
+      }
+    }
+  }
+</script>

src/routes/_pages/settings/instances/add.html

@@ -34,7 +34,15 @@
   </form>
 
   {#if !$isUserLoggedIn}
-  <p>Don't have an instance? <ExternalLink href="https://joinmastodon.org">Join Mastodon!</ExternalLink></p>
+  <p>
+    Don't have an
+    <Tooltip
+      text="instance"
+      tooltipText="An instance is your Mastodon home server, such as mastodon.social or cybre.space."
+    />
+    ?
+    <ExternalLink href="https://joinmastodon.org">Join Mastodon!</ExternalLink>
+  </p>
   {/if}
 </SettingsLayout>
 <style>
@@ -78,6 +86,7 @@
   import { logInToInstance, handleOauthCode } from '../../../_actions/addInstance'
   import ExternalLink from '../../../_components/ExternalLink.html'
   import { testHasIndexedDB, testHasLocalStorage } from '../../../_utils/testStorage'
+  import Tooltip from '../../../_components/Tooltip.html'
 
   export default {
     async oncreate () {
@@ -92,7 +101,8 @@
     },
     components: {
       SettingsLayout,
-      ExternalLink
+      ExternalLink,
+      Tooltip
     },
     store: () => store,
     data: () => ({

src/scss/themes/_base.scss

@@ -106,4 +106,7 @@
   --tab-bg-active: #{darken($main-bg-color, 25%)};
   --tab-bg-hover: #{darken($main-bg-color, 4%)};
   --tab-bg-hover-non-selected: #{darken($main-bg-color, 7%)};
+
+  --tooltip-bg: rgba(30, 30, 30, 0.9);
+  --tooltip-color: white;
 }