Add icon download tooltip

_includes/icons.html

@@ -2,8 +2,13 @@
   <div class="container icons-container">
     {% for icon in site.data['icons-manifest'] %}
       {% capture icon_path %}icons/{{ icon }}.svg{% endcapture %}
-      <div class="feather-icon">
+      <div class="feather-icon" tabindex="0">
         {% include_relative {{ icon_path }} %}
+        <div class="tooltip">
+          <p class="tooltip-icon-name">{{ icon }}</p>
+          <!-- TODO: remove tabindex="-1" -->
+          <a class="tooltip-download" href="{{ icon_path }}" download tabindex="-1">Download</a>
+        </div>
       </div>
     {% endfor %}
   </div>

assets/tooltip-arrow.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="20" viewBox="0 0 36 20">
+  <title>tooltip-arrow</title>
+  <path d="M20.12,2.12,31.24,13.24A6,6,0,0,0,35.49,15H36v5H0V15H.51a6,6,0,0,0,4.24-1.76L15.88,2.12A3,3,0,0,1,20.12,2.12Z" fill="#424242"/>
+</svg>

style.scss

@@ -164,10 +164,15 @@ a {
 
 .feather-icon {
   display: inline-block;
+  position: relative;
+  box-sizing: content-box;
   width: 1.5rem;
   height: 1.5rem;
-  margin: 1rem;
+  margin: 0.25rem;
+  padding: 0.75rem;
   stroke-width: 2px;
+  outline: none;
+  cursor: pointer;
 
   > svg {
     width: 100%;
@@ -177,6 +182,73 @@ a {
   }
 }
 
+.tooltip {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: calc(100% + 15px);
+  left: 50%;
+  min-width: 8rem;
+  transform: translateX(-50%) scale(0.75);
+  transform-origin: 50% 0;
+  color: #fff;
+  background-color: #424242;
+  text-align: center;
+  border-radius: 0.375rem;
+  opacity: 0;
+  visibility: hidden;
+  z-index: 10;
+  cursor: default;
+  transition:
+    transform $transition-duration,
+    opacity $transition-duration,
+    visibility $transition-duration;
+
+  @include for-tablet-portrait-up {
+    min-width: 12rem;
+  }
+
+  .feather-icon:focus & {
+    transform: translateX(-50%) scale(1);
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.tooltip::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -15px);
+  width: 36px;
+  height: 20px;
+  background-image: url("assets/tooltip-arrow.svg");
+  background-size: 100%;
+}
+
+.tooltip-icon-name {
+  display: inline-block;
+  margin: 0;
+  padding: 1rem 1.5rem;
+}
+
+.tooltip-download {
+  display: inline-block;
+  padding: 1rem 1.5rem;
+  background-color: #212121;
+  border-radius: 0 0 0.375rem 0.375rem;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  transition: background-color $transition-duration;
+
+  &:hover {
+    background-color: #000;
+  }
+}
+
 /* Request */
 
 .request-container {