pinafore/src/routes/_components/Tooltip.html

<!-- 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>
<Shortcut scope="global" key="Escape" on:pressed="dismiss()" />
<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>
  import Shortcut from './shortcut/Shortcut.html'

  let counter = 0

  export default {
    data: () => ({
      id: ++counter,
      shown: false,
      mouseover: false
    }),
    methods: {
      toggle (e) {
        e.preventDefault()
        e.stopPropagation()
        const { 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)
        }
      },
      dismiss () {
        this.set({ shown: false })
      }
    },
    components: {
      Shortcut
    }
  }
</script>