Tool tip for alert words.

papameet · Dec 28, 2020 · 78a9a7f · 78a9a7f
1 parent 6615a6e
commit 78a9a7f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/src/index.css b/src/index.css
@@ -228,3 +228,7 @@ input[type="number"] {
   vertical-align: middle;
   padding-bottom: 16px;
 }
+
+.tooltipped {
+  font-size: 1.2rem;
+}
diff --git a/src/main.js b/src/main.js
@@ -226,9 +226,15 @@ getPageURL().then((url) => {
   }
 });
 
+function setupTooltip() {
+  const elems = document.querySelectorAll('.tooltipped');
+  M.Tooltip.init(elems, {});
+}
+
 setUpSettingsFromStorage(state).then((joinTime) => {
   setupTimepickers(joinTime);
   setupChips(state.alertWords);
+  setupTooltip();
   browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
     browser.tabs
       .sendMessage(tabs[0].id, { message: "sendState", state })

diff --git a/src/static/index.html b/src/static/index.html
@@ -21,7 +21,7 @@ <h3 id='leave_text'>
         </h3>
       </div>
 
-      <div class="chips"> </div>
+      <div class="chips"><a class="tooltipped" data-position="top" data-tooltip="Notifies if appeared in captions">❓</a></div>
 
       <button id="submit">Submit</button>
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,7 +21,7 @@ <h3 id='leave_text'> @@
             </h3>
           </div>
-          <div class="chips"> </div>
+          <div class="chips"><a class="tooltipped" data-position="top" data-tooltip="Notifies if appeared in captions">❓</a></div>
           <button id="submit">Submit</button>
         </div>
@@ Expand Down @@