Feat: Add tool tips to tell user what buttons do

Author: podfeet

src/index.html

@@ -272,10 +272,9 @@ <h3>Generate Password(s)</h3>
             <form id="generatePasswords"> <!-- open input area for gen pw -->
               <div class="row">
                 <div class="col-8 col-md-6 mb-3">
-                  <!-- Technically the label should be there but it's an audible repeat of span class -->
-                  <!-- <label class="visually-hidden" for="selectAmount">Number of passwords</label> -->
+                  <label class="visually-hidden" for="selectAmount">Number of passwords</label>
                   <div class="input-group mt-2">
-                    <span class="input-group-text"># of passwords</span>
+                    <span class="input-group-text" aria-hidden="true"># of passwords</span>
                     <input type="number" min="1" max="10" step="1" value="3" class="form-control" name="selectAmount"
                       id="selectAmount" aria-describedby="enterNumberOfPasswords" />
                   </div>
@@ -315,9 +314,11 @@ <h3>Generate Password(s)</h3>
           </div>
           <div class="card-body">
             <section id="password_presentation">
-                <input type="radio" name="pwdPresentation" value="lst" aria-description="Present passwords in a list" tabindex="0" checked>
+                <input type="radio" name="pwdPresentation" value="lst" aria-description="Present passwords in a list" tabindex="0" checked data-toggle="tooltip" data-placement="button"
+                title="List view with indifvidual copy buttons">
                 <label for="lst" class="bi bi-list-ul" style="margin-left:0.5em;margin-right:1em"></label>
-                <input type="radio" name="pwdPresentation" value="txt" aria-description="Present passwords as a block of text" tabindex="0">
+                <input type="radio" name="pwdPresentation" value="txt" aria-description="Present passwords as a block of text" tabindex="0" data-toggle="tooltip" data-placement="button"
+                title="All passwords selected ready to copy as a group">
                 <label for="txt" class="bi bi-file-earmark-text" style="margin-left:0.5em;margin-right:1em"></label>
             </section>
             <ul id="generated_password_lst" style="list-style-type:none;"></ul>

src/web/passwordview.mjs

@@ -152,7 +152,9 @@ class PasswordView {
         htmlPwdList = htmlPwdList.concat(`
             <li>
                 <button id="copyclip_${theIndex}"
-                        class="btn btn-clipboard bi-clipboard"
+                        class="btn btn-clipboard bi-clipboard" 
+                        data-toggle="tooltip" data-placement="button"
+                        title="Copy to Clipboard"
                         aria-label="Copy Password #${theIndex+1}">
                 </button>
                 ${passAndStats.passwords[theIndex]}