Fix for html issue and making the share button move.

FrontendMentor/article-preview-component/css/style.css

@@ -86,6 +86,8 @@ body {
     padding: 1rem 1.5rem 1rem 1.5rem;
 
     transition: 250ms ease-in-out;
+
+    position: relative;
 }
 
 .authorImage {
@@ -137,7 +139,7 @@ body {
 
 .articleShareButtonTooltip {
     display: none;
-    position: relative;
+    position: absolute;
     justify-content: space-between;
     align-items: center;
 
@@ -148,10 +150,9 @@ body {
 
     width: 170px;
     padding: 0.75rem 1rem;
-    bottom: 80px;
+    top: -60px;
-    left: -104px;
+    right: -47px;
 
-    overflow: visible;
 }
 
 .articleShareButtonTooltip::before {
@@ -234,6 +235,7 @@ body {
     .articleFooter {
         padding: 0rem 1.75rem 1.5rem 1.5rem;
     }
+
 }
 
 .attribution { position: absolute; bottom: 0; font-size: 11px; text-align: center; }

FrontendMentor/article-preview-component/index.html

@@ -48,13 +48,13 @@
             <button class="articleShareButton" onclick="toggleTooltip()" >
               <!-- <img src="./images/icon-share.svg" alt="Share Icon" class=""> -->
               <svg xmlns="http://www.w3.org/2000/svg" width="15" height="13"><path fill="currentColor" d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z"/></svg>
-              <div class="articleShareButtonTooltip">
+            </button>
+            <div class="articleShareButtonTooltip">
                 <p>SHARE</p>
                 <img src="./images/icon-facebook.svg" alt="Facebook Icon" class="articleShareIcon">
                 <img src="./images/icon-twitter.svg" alt="Twitter Icon" class="articleShareIcon">
                 <img src="./images/icon-pinterest.svg" alt="Pinterest Icon" class="articleShareIcon">
               </div>
-            </button>
           </div>
       </div>
     </div>

FrontendMentor/article-preview-component/notes/process.md

@@ -70,3 +70,19 @@ Differences from design
 
 ![Mobile Final Difference](./mobile-diff-final.png)
 ![Desktop Final Difference](./desktop-diff-final.png)
+
+---
+
+On subnmission there was an HTML issue:
+
+```
+Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
+
+Context:
+
+<div class=`articleShareButtonTooltip`>
+```
+
+Fixed it. Moved the div outside of the button. Then set `position:relative;` on `articleFooter`, and `position: absolute;` on `.articleShareButtonTooltip`
+
+Last thing, how to I "fake click the tooltip off the screen' when passing the media query breakpoint?