tooltips for copied text

docs/index.html

@@ -46,9 +46,13 @@
         <a class="link-social" href="https://github.com/ReznoRMichael/hollow-knight-completion-check" target="_blank"><i class="simpleicon-github"></i>GitHub</a>
         <br>
         <!-- <a href="https://pastebin.com/raw/shfZ4Vqs" target="_blank">[ Decoded 5% Save Example ]</a><br> -->
-        <input type="text" id="save-location-input" size="57" value="%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\" readonly>
+        <div class="tooltip">
-        <br>
+            <input type="text" id="save-location-input" size="57" value="%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\" readonly>
-        Choose a HK user*.dat save OR paste a <a href="https://bloodorca.github.io/hollow/" target="_blank">decoded save</a>.
+            <span class="tooltip-text" id="save-location-input-tooltip">Click once to copy to clipboard</span>
+        </div>
+        <p class="smalltext">
+            Choose a HK user*.dat save OR paste a <a href="https://bloodorca.github.io/hollow/" target="_blank">decoded save</a>.
+        </p>
     </p>
 
     <div>

docs/main.css

@@ -220,9 +220,9 @@ h2 {
     text-align: center;
     width: max-content;
     color: #fff;
-    display: inline-block;
+    display: block;
     background-color: rgba(128, 128, 128, 0.5);
-    margin: 0.4rem 0 0.6rem 0;
+    margin: 0.4rem auto 0.6rem auto;
     padding: 0.16rem 0.5rem 0.25rem 0.5rem;
     border: 1px solid rgba(231, 251, 255, 0.6);
     border-radius: 3px;
@@ -251,7 +251,7 @@ textarea {
     margin: 0.5rem 2px 0.5rem 2px;
     overflow-x: hidden;
     overflow-y: scroll;
-    
+
     /* These are technically the same, but use both */
     overflow-wrap: break-word;
     word-wrap: break-word;
@@ -363,14 +363,17 @@ input[type="file"] {
         flex-direction: column;
         align-items: center;
     }
+
     .input-buttons {
         align-items: center;
         justify-content: center;
     }
+
     .centered {
         flex-direction: column;
         align-items: flex-start;
     }
+
     .checkboxes {
         margin-top: 0.8rem;
     }
@@ -640,3 +643,40 @@ input[type="radio"] {
     border-radius: 50%;
     background: #000;
 }
+
+.tooltip {
+    position: relative;
+}
+
+.tooltip .tooltip-text {
+    visibility: hidden;
+    width: max-content;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 150%;
+    left: 50%;
+    margin-left: -75px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.tooltip .tooltip-text::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+}
+
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}

src/css/style.css

@@ -113,9 +113,9 @@ h2 {
     text-align: center;
     width: max-content;
     color: #fff;
-    display: inline-block;
+    display: block;
     background-color: rgba(128, 128, 128, 0.5);
-    margin: 0.4rem 0 0.6rem 0;
+    margin: 0.4rem auto 0.6rem auto;
     padding: 0.16rem 0.5rem 0.25rem 0.5rem;
     border: 1px solid rgba(231, 251, 255, 0.6);
     border-radius: 3px;
@@ -144,7 +144,7 @@ textarea {
     margin: 0.5rem 2px 0.5rem 2px;
     overflow-x: hidden;
     overflow-y: scroll;
-    
+
     /* These are technically the same, but use both */
     overflow-wrap: break-word;
     word-wrap: break-word;
@@ -256,14 +256,17 @@ input[type="file"] {
         flex-direction: column;
         align-items: center;
     }
+
     .input-buttons {
         align-items: center;
         justify-content: center;
     }
+
     .centered {
         flex-direction: column;
         align-items: flex-start;
     }
+
     .checkboxes {
         margin-top: 0.8rem;
     }
@@ -532,4 +535,41 @@ input[type="radio"] {
     height: 10px;
     border-radius: 50%;
     background: #000;
+}
+
+.tooltip {
+    position: relative;
+}
+
+.tooltip .tooltip-text {
+    visibility: hidden;
+    width: max-content;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 150%;
+    left: 50%;
+    margin-left: -75px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.tooltip .tooltip-text::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+}
+
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
 }

src/index.html

@@ -46,9 +46,13 @@
         <a class="link-social" href="https://github.com/ReznoRMichael/hollow-knight-completion-check" target="_blank"><i class="simpleicon-github"></i>GitHub</a>
         <br>
         <!-- <a href="https://pastebin.com/raw/shfZ4Vqs" target="_blank">[ Decoded 5% Save Example ]</a><br> -->
-        <input type="text" id="save-location-input" size="57" value="%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\" readonly>
+        <div class="tooltip">
-        <br>
+            <input type="text" id="save-location-input" size="57" value="%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\" readonly>
-        Choose a HK user*.dat save OR paste a <a href="https://bloodorca.github.io/hollow/" target="_blank">decoded save</a>.
+            <span class="tooltip-text" id="save-location-input-tooltip">Click once to copy to clipboard</span>
+        </div>
+        <p class="smalltext">
+            Choose a HK user*.dat save OR paste a <a href="https://bloodorca.github.io/hollow/" target="_blank">decoded save</a>.
+        </p>
     </p>
 
     <div>

src/js/HKCheckCompletion.js

@@ -1046,7 +1046,7 @@ function ResetCompletion(jsObj) {
     }
 }
 
-function SelectCopyInputText(mouseEvent) {
+function SelectCopyInputText(mouseEvent, tooltipId = "", tooltipFill = "") {
 
     const element = document.getElementById(mouseEvent.target.id);
 
@@ -1054,11 +1054,22 @@ function SelectCopyInputText(mouseEvent) {
     element.select();
     element.setSelectionRange(0, 99999); // for mobile devices
 
-    /* Copy the text inside the text field */
+    // Copy the text inside the text field to clipboard
     document.execCommand("copy");
 
-    /* Alert the copied text */
+    if (tooltipFill.length && tooltipId.length) ShowTooltip(tooltipId, tooltipFill);
-    console.log("Copied the text: " + element.value);
+}
+
+function ShowTooltip(tooltipId, tooltipFill) {
+    
+    const tooltip = document.getElementById(tooltipId);
+    tooltip.innerHTML = tooltipFill;
+}
+
+function FillInnerHTML(elementId, textFill) {
+
+    const element = document.getElementById(elementId);
+    element.innerHTML = textFill;
 }
 
 // Populate HTML at load (before img and css)
@@ -1066,12 +1077,15 @@ document.addEventListener("DOMContentLoaded", InitialHTMLPopulate(HK.DIV_ID));
 
 // Does an action when the save file location input text is clicked once (auto select & copy to clipboard)
 document.getElementById("save-location-input").addEventListener("click", (e) => {
-    SelectCopyInputText(e);
+    SelectCopyInputText(e, "save-location-input-tooltip", "Copied save file location to clipboard");
+}, false);
+
+document.getElementById("save-location-input").addEventListener("mouseout", () => {
+    FillInnerHTML("save-location-input-tooltip", "Click once to copy to clipboard");
 }, false);
 
 // Make functions global so they can be used on click and change events (for Webpack)
 window.HKReadTextArea = HKReadTextArea;
 window.InitialHTMLPopulate = InitialHTMLPopulate;
 window.CheckboxSpoilersToggle = CheckboxSpoilersToggle;
-window.CheckboxHintsToggle = CheckboxHintsToggle;
+window.CheckboxHintsToggle = CheckboxHintsToggle;
-window.SelectCopyInputText = SelectCopyInputText;