commit 2485a3e067e679197f3f5b0bbf215ce1663e4838
author avm99963 <me@avm99963.com> Wed Sep 08 22:18:38 2021 +0200
committer Adrià Vilanova Martínez <me@avm99963.com> Fri Oct 15 23:45:56 2021 +0200
tree b3b45391c3de85c4b364543c1c743873fded7af8
parent 1f65252b3bf64ca5ee01fc36c2e95593f624574a

Use material tooltips

Tooltips will be used in the future for other features, and this allows
existing plain tooltips to be shown as soon as the mouse enters the
element, without the long delay inherent to standard tooltips.

Bug: twpowertools:45
Change-Id: Ifa7bf1ee8db8da7afaf36b9d19448f5a0cdd4ebc

src/contentScripts/communityConsole/batchLock.js

diff --git a/src/contentScripts/communityConsole/batchLock.js b/src/contentScripts/communityConsole/batchLock.js
index 20af6df..11b133a 100644
--- a/src/contentScripts/communityConsole/batchLock.js
+++ b/src/contentScripts/communityConsole/batchLock.js
@@ -1,4 +1,7 @@
+import {MDCTooltip} from '@material/tooltip';
+
 import {isOptionEnabled} from '../../common/optionsUtils.js';
+import {createPlainTooltip} from '../../common/tooltip.js';
 
 import {createExtBadge, removeChildNodes} from './utils/common.js';
 
@@ -118,11 +121,11 @@
     var clone = readToggle.cloneNode(true);
     clone.setAttribute('debugid', 'batchlock');
     clone.classList.add('TWPT-btn--with-badge');
-    clone.setAttribute('title', chrome.i18n.getMessage('inject_lockbtn'));
     clone.querySelector('material-icon').setAttribute('icon', 'lock');
     clone.querySelector('i.material-icon-i').textContent = 'lock';
 
-    var badge = createExtBadge();
+    let badge, badgeTooltip;
+    [badge, badgeTooltip] = createExtBadge();
     clone.append(badge);
 
     clone.addEventListener('click', () => {
@@ -137,6 +140,9 @@
     else
       readToggle.parentNode.insertBefore(
           clone, (readToggle.nextSibling || readToggle));
+
+    createPlainTooltip(clone, chrome.i18n.getMessage('inject_lockbtn'));
+    new MDCTooltip(badgeTooltip);
   },
   addButtonIfEnabled(readToggle) {
     isOptionEnabled('batchlock').then(isEnabled => {