added tooltips to placeholder text

public/assets/css/general.css

@@ -40,7 +40,6 @@ p {
 /* Tooltip container */
 .tooltip {
 	position: relative;
-	display: inline-block;
 	border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
 }
 /* Tooltip text */

views/partials/publishForm-Channel.handlebars

@@ -38,23 +38,6 @@
 
 <script src="/assets/js/authFunctions.js"></script>
 <script type="text/javascript">
-    function updateUrl (selectedOption) {
-        const urlChannel = document.getElementById('url-channel');
-        if (selectedOption === 'new' || selectedOption === 'login' || selectedOption === ''){
-            // update URL
-            urlChannel.innerText = '@channelName';
-            //toolTipText.innerText = 'will be replaced by your channel and id';
-            urlChannel.setAttribute('class', 'url-text url-text--secondary')
-        } else if (selectedOption === 'anonymous'){
-            urlChannel.innerText = 'xyz';
-            //toolTipText.innerText = 'will be replaced by a random id';
-            urlChannel.setAttribute('class', 'url-text url-text--secondary')
-        } else {
-            urlChannel.innerText = `{{user.channelName}}:{{user.shortChannelId}}`;
-            //toolTipText.innerText = '';
-            urlChannel.setAttribute('class', 'url-text url-text--primary')
-        }
-    }
     // show or hide the channel selection tools
     function toggleChannel (selectedOption) {
         const channelSelectOptions = document.getElementById('channel-select-options');
@@ -96,4 +79,23 @@
         // update url
         updateUrl(selectedChannel);
     }
+    function updateUrl (selectedOption) {
+        const urlChannel = document.getElementById('url-channel');
+        const urlNoChannelPlaceholder = document.getElementById('url-no-channel-placeholder');
+        const urlChannelPlaceholder = document.getElementById('url-channel-placeholder');
+        if (selectedOption === 'new' || selectedOption === 'login' || selectedOption === ''){
+            urlChannel.hidden = true;
+            urlNoChannelPlaceholder.hidden = true;
+            urlChannelPlaceholder.hidden = false;
+        } else if (selectedOption === 'anonymous'){
+            urlChannel.hidden = true;
+            urlNoChannelPlaceholder.hidden = false;
+            urlChannelPlaceholder.hidden = true;
+        } else {
+            urlChannel.hidden = false;
+            urlChannel.innerText = `{{user.channelName}}:{{user.shortChannelId}}`;
+            urlNoChannelPlaceholder.hidden = true;
+            urlChannelPlaceholder.hidden = true;
+        }
+    }
 </script>

views/partials/publishForm-Url.handlebars

@@ -5,11 +5,13 @@
     </div><div class="column column--6 column--sml-10">
         <div id="input-error-claim-name" class="info-message info-message--failure"  hidden="true"></div>
         <div class="input-text--primary">
-            {{#if user}}
+            <span class="url-text">Spee.ch /</span>
-                <span class="url-text">Spee.ch/</span><span id="url-channel" class="url-text url-text--primary">{{user.channelName}}:{{user.shortChannelId}}</span>/<input type="text" id="claim-name-input" class="input-text" placeholder="your-url-here" oninput="checkClaimName(event.target.value)"><span id="input-success-claim-name" class="info-message info-message--success"></span>
+            <span id="url-channel" class="url-text url-text--primary" {{#if user}}{{else}}hidden="true"{{/if}}>{{user.channelName}}:{{user.shortChannelId}}</span>
-            {{else}}
+            <span id="url-no-channel-placeholder" class="url-text url-text--secondary tooltip" {{#if user}}hidden="true"{{else}}{{/if}}>xyz<span class="tooltip-text">This will be your random id</span></span>
-                <span class="url-text">Spee.ch/</span><span id="url-channel" class="url-text url-text--secondary">xyz</span>/<input type="text" id="claim-name-input" class="input-text" placeholder="your-url-here" oninput="checkClaimName(event.target.value)"><span id="input-success-claim-name" class="info-message info-message--success"></span>
+            <span id="url-channel-placeholder" class="url-text url-text--secondary tooltip" hidden="true">@channel<span class="tooltip-text">Select a channel above</span></span>
-            {{/if}}
+            /
+            <input type="text" id="claim-name-input" class="input-text" placeholder="your-url-here" oninput="checkClaimName(event.target.value)">
+            <span id="input-success-claim-name" class="info-message info-message--success"></span>
         </div>
     </div>