Improving tooltip for mobile (#27)

Author: wietze

_layouts/bin.html

@@ -81,7 +81,7 @@ <h2 id="{{function_name}}" class="function-name">
 					<dl class="row"><dt class="property">Privileges required</dt><dd>{{item.Privileges}}</dd></dl>
 					<dl class="row"><dt class="property">Operating systems</dt><dd>{{item.OperatingSystem}}</dd></dl>
 					<dl class="row"><dt class="property">ATT&CK&reg; technique</dt><dd><span data-attack-tid="{{item.MitreID}}">{{item.MitreID}}</span></dd></dl>
-					{%- if item.Tags %}<dl class="tags row"><dt class="property">Tags</dt><dd>{% for tag_items in item.Tags %}{% for tag_item in tag_items %}{%assign key=tag_item[0]%}{%assign value=tag_item[1]%}{%assign tag=key | append:': ' | append:value %}{% assign default_text = 'This function was tagged with "' | append: tag | append:'".' %}<div class="tag">{{tag}}<div class="tag-tooltip">{{site.data.tags[key][value] | default:default_text}}</div></div>{%endfor%}{%endfor%}</dd></dl>{%endif%}
+					{%- if item.Tags %}<dl class="tags row"><dt class="property">Tags</dt><dd>{% for tag_items in item.Tags %}{% for tag_item in tag_items %}{%assign key=tag_item[0]%}{%assign value=tag_item[1]%}{%assign tag=key | append:': ' | append:value %}{% assign default_text = 'This function was tagged with "' | append: tag | append:'".' %}<div class="tag tooltip-top tooltip-mobile" data-tooltip="{{site.data.tags[key][value] | default:default_text}}">{{tag}}</div>{%endfor%}{%endfor%}</dd></dl>{%endif%}
 				</div>
 			</li>
 			{%- endfor %}

assets/style.scss

@@ -37,12 +37,6 @@ $layout-break: "(min-width: #{$column-width + $grace-space})";
         display:none;
     }
 
-    .tag .tag-tooltip {
-        width: max-content;
-        max-width: 60vw !important;
-        transform: translate(-60%, calc(-100% - 2em));
-    }
-
     ol:has(> :nth-child(2)) {
         padding-left: 1em !important;
     }
@@ -294,34 +288,13 @@ ul {
 .tag {
     background-color: $accent;
     color: white;
-    padding: 5px;
+    cursor: pointer;
     display: inline-block;
+    font-size: 85%;
+    padding: 5px;
     position: relative;
-    cursor: pointer;
-}
-
-.tag .tag-tooltip {
-    cursor: text;
-    display: none;
-    position: absolute;
-    top: 1.9em;
-    left: 0;
-    z-index: 99999;
-    border: 2px solid $accent;
-    border-radius: 5px;
-    background-color: white;
-    color: black;
-    padding: 3px;
-    width: max-content;
-    max-width: 500px;
 }
 
-.tag:hover .tag-tooltip,
-.tag-tooltip:hover {
-    display: inline-table;
-}
-
-
 .properties {
     display: flex;
     flex-direction: column;
@@ -376,3 +349,129 @@ section + section {
 .path-highlight {
     color: #888;
 }
+
+
+$xy-border: (
+  top: t,
+  bottom: b,
+  left: l,
+  right: r
+);
+
+
+[data-tooltip] {
+    $triangle: .3rem;
+    $background-color: rgba(51,51,51,.9);
+
+    cursor: pointer;
+    display: inline-block;
+    line-height: 1;
+    position: relative;
+
+    &::after {
+      background-color: $background-color;
+      border-radius: $triangle;
+      color: #fff;
+      content: attr(data-tooltip);
+      font-size: 1rem;
+      font-size: 100%;
+      font-weight: normal;
+      line-height: 1.15rem;
+      opacity: 0;
+      padding: .25rem .5rem;
+      position: absolute;
+      text-align: center;
+      text-transform: none;
+      transition: opacity .2s;
+      visibility: hidden;
+      z-index: 1;
+      max-width: 300px;
+      width: 300px;
+    }
+
+    @each $direction, $d in $xy-border {
+      &.tooltip-#{$direction} {
+        // arrows
+        &::before {
+          border-style: solid;
+          border-width: $triangle;
+          content: "";
+          opacity: 0;
+          position: absolute;
+          transition: opacity .2s;
+          visibility: hidden;
+          @if $direction == top {
+            border-color: $background-color transparent transparent transparent;
+            top: -20%;
+            left: 50%;
+            margin-left: -$triangle;
+          } @else
+          if $direction == bottom {
+            border-color: transparent transparent $background-color transparent;
+            bottom: 0;
+            left: 50%;
+            margin-left: -$triangle;
+          } @else
+          if $direction == left {
+            border-color: transparent transparent transparent $background-color;
+            top: $triangle;
+            right: calc(110% - #{$triangle});
+            margin-top: -$triangle;
+          } @else
+          if $direction == right {
+            border-color: transparent $background-color transparent transparent;
+            top: 50%;
+            top: $triangle;
+            left: calc(110% - #{$triangle});
+            margin-top: -$triangle;
+          }
+        }
+
+        &::after {
+          @if $direction == top {
+            bottom: 120%;
+            left: 50%;
+            transform: translate(-50%);
+          } @else
+          if $direction == bottom {
+            top: 100%;
+            left: 50%;
+            transform: translate(-50%);
+          } @else
+          if $direction == left {
+            top: -$triangle;
+            right: calc(110% + #{$triangle});
+          } @else
+          if $direction == right {
+            top: -$triangle;
+            left: calc(110% + #{$triangle});
+          }
+        }
+      }
+    }
+
+    &.tooltip-mobile {
+      @media (max-width: 767px) {
+        &::before {
+          display: none;
+        }
+
+        &:after {
+          font-size: 1rem;
+          max-width: 20rem;
+          position: fixed;
+          bottom: 1%;
+          left: 50%;
+          text-align: left;
+          transform: translate(-50%);
+          white-space: normal;
+        }
+      }
+    }
+
+    &:hover::after,
+    &[class*=tooltip-]:hover::before {
+      visibility: visible;
+      opacity: 1;
+    }
+  }