From 78e420296397beae3096b2d05f4da7ccf31467a1 Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Sun, 4 Oct 2020 12:04:01 +0100
Subject: [PATCH] Fix for html issue and making the share button move.

---
 .../article-preview-component/css/style.css      | 10 ++++++----
 .../article-preview-component/index.html         |  4 ++--
 .../article-preview-component/notes/process.md   | 16 ++++++++++++++++
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/FrontendMentor/article-preview-component/css/style.css b/FrontendMentor/article-preview-component/css/style.css
index 0abf2d5..66e10f6 100644
--- a/FrontendMentor/article-preview-component/css/style.css
+++ b/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;
-    left: -104px;
+    top: -60px;
+    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; }
diff --git a/FrontendMentor/article-preview-component/index.html b/FrontendMentor/article-preview-component/index.html
index de3c47f..5ec32e7 100644
--- a/FrontendMentor/article-preview-component/index.html
+++ b/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>
diff --git a/FrontendMentor/article-preview-component/notes/process.md b/FrontendMentor/article-preview-component/notes/process.md
index 3209a00..017de1b 100644
--- a/FrontendMentor/article-preview-component/notes/process.md
+++ b/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?
\ No newline at end of file