add tooltip functionality and styles

Author: alandefreitas

_sass/modules/layout.scss

@@ -241,6 +241,28 @@
 }
 
 .generated-content {
+  .tooltip-preview {
+    &__title {
+      display: inline-block;
+      padding: 4px 8px;
+      margin-bottom: 6px;
+      border-radius: 4px;
+      background-color: $color--gray-dark;
+      color: $color--white;
+      font-size: 0.75rem;
+      line-height: 1.3;
+      box-shadow: 0 4px 12px rgba($color--black, 0.2);
+    }
+
+    &__link {
+      text-decoration: underline;
+    }
+  }
+
+  a[title] {
+    text-decoration: underline;
+  }
+
   h1 {
     font-weight: 700;
     font-size: 1.25rem; /* 20px */

_sass/modules/tooltips.scss

@@ -0,0 +1,59 @@
+.tooltip-static-wrapper {
+  position: relative;
+  display: inline-block;
+  isolation: isolate;
+}
+
+.tooltip-static {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translate(-50%, 2px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 12px;
+  border-radius: 5px;
+  border: 1px solid rgba($color--white, 0.1);
+  background-color: rgba($color--gray-dark, 0.87);
+  color: mix($color--white, $color--light, 72%);
+  font-size: 0.78rem;
+  font-weight: 500;
+  line-height: 1.25;
+  box-shadow: 0 6px 18px rgba($color--black, 0.12);
+  text-align: center;
+  max-width: 240px;
+  min-width: 140px;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  letter-spacing: 0.01em;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
+
+  @include breakpoint($tablet) {
+    font-size: 0.82rem;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: -6px;
+    width: 12px;
+    height: 12px;
+    background: rgba($color--gray-dark, 0.87);
+    clip-path: polygon(50% 100%, 0 0, 100% 0);
+    transform: translateX(-50%);
+    filter: drop-shadow(0 2px 6px rgba($color--black, 0.1));
+  }
+}
+
+.tooltip-static-wrapper:hover .tooltip-static,
+.tooltip-static-wrapper:focus-within .tooltip-static,
+.tooltip-static-wrapper.is-visible .tooltip-static {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(-50%, 0);
+}

css/style.scss

@@ -15,6 +15,7 @@
 @import 'modules/navigation';
 @import 'modules/slack';
 @import 'modules/social';
+@import 'modules/tooltips';
 
 @import 'pages/homepage';
 @import 'pages/post';

js/main.js

@@ -34,5 +34,111 @@ document.addEventListener('DOMContentLoaded', function(event) {
     })
   });
 
-});
+  var tooltipLinks = document.querySelectorAll('.generated-content a[title], .tooltip-enabled a[title], a.tooltip-hint');
+
+  var openTooltipWrapper = null;
+
+  function showTooltip(wrapper) {
+    if (!wrapper) {
+      return;
+    }
+
+    if (openTooltipWrapper && openTooltipWrapper !== wrapper) {
+      hideTooltip(openTooltipWrapper);
+    }
+
+    wrapper.classList.add('is-visible');
+    openTooltipWrapper = wrapper;
+  }
+
+  function hideTooltip(wrapper) {
+    if (!wrapper) {
+      return;
+    }
+
+    wrapper.classList.remove('is-visible');
+
+    if (openTooltipWrapper === wrapper) {
+      openTooltipWrapper = null;
+    }
+  }
+
+  forEach(tooltipLinks, function(index, link) {
+    var tooltipText = link.getAttribute('title');
+
+    if (!tooltipText || !tooltipText.trim()) {
+      return;
+    }
+
+    tooltipText = tooltipText.trim();
+
+    var wrapper = link.parentElement;
+
+    if (!wrapper || !wrapper.classList.contains('tooltip-static-wrapper')) {
+      wrapper = document.createElement('span');
+      wrapper.className = 'tooltip-static-wrapper';
+      link.insertAdjacentElement('beforebegin', wrapper);
+      wrapper.appendChild(link);
+    }
+
+    var tooltipSpan = wrapper.querySelector('.tooltip-static');
 
+    if (!tooltipSpan) {
+      tooltipSpan = document.createElement('span');
+      tooltipSpan.className = 'tooltip-static';
+      wrapper.insertBefore(tooltipSpan, wrapper.firstChild);
+    }
+
+    tooltipSpan.textContent = tooltipText;
+    tooltipSpan.setAttribute('role', 'tooltip');
+
+    var tooltipId = tooltipSpan.id;
+
+    if (!tooltipId) {
+      tooltipId = 'tooltip-' + index + '-' + Math.random().toString(36).slice(2, 8);
+      tooltipSpan.id = tooltipId;
+    }
+
+    link.setAttribute('data-tooltip', tooltipText);
+    link.removeAttribute('title');
+    link.setAttribute('aria-describedby', tooltipSpan.id);
+    link.classList.add('tooltip-trigger');
+
+    link.addEventListener('mouseenter', function() {
+      showTooltip(wrapper);
+    });
+
+    link.addEventListener('mouseleave', function() {
+      hideTooltip(wrapper);
+    });
+
+    link.addEventListener('focus', function() {
+      showTooltip(wrapper);
+    });
+
+    link.addEventListener('blur', function() {
+      hideTooltip(wrapper);
+    });
+
+    link.addEventListener('touchstart', function(e) {
+      e.preventDefault();
+
+      if (wrapper.classList.contains('is-visible')) {
+        hideTooltip(wrapper);
+      } else {
+        showTooltip(wrapper);
+      }
+    }, { passive: false });
+  });
+
+  document.addEventListener('touchstart', function(event) {
+    if (!openTooltipWrapper) {
+      return;
+    }
+
+    if (!openTooltipWrapper.contains(event.target)) {
+      hideTooltip(openTooltipWrapper);
+    }
+  });
+
+});