Use browser builtin tooltip

If the containers list is too long, the tooltip is rendered outside the visible area. Using the builtin tooltip ensures that it is always rendered on top of all the items and so it prevents it to be hidden if the list overflow.

src/js/mozillaVpn.js

@@ -34,11 +34,8 @@ const MozillaVPN = {
         }
         if (!mozillaVpnConnected && proxy.mozProxyEnabled) {
           flag.classList.add("proxy-unavailable");
-          const tooltip = el.querySelector(".tooltip.proxy-unavailable");
-          if (tooltip) {
-            tooltip.textContent = tooltipProxyWarning;
-          }
           const menuItemName = el.querySelector(".menu-item-name");
+          menuItemName.setAttribute("title", tooltipProxyWarning);
           if (menuItemName) {
             el.querySelector(".menu-item-name").dataset.mozProxyWarning = "proxy-unavailable";
           }
@@ -68,14 +65,11 @@ const MozillaVPN = {
     const mozillaVpnConnected = await browser.runtime.sendMessage({ method: "MozillaVPN_getConnectionStatus" });
     const connectionStatusStringId = mozillaVpnConnected ? "moz-vpn-connected" : "moz-vpn-disconnected";
     const connectionStatusLocalizedString = browser.i18n.getMessage(connectionStatusStringId);
+    const connectionStatusTooltip = document.querySelector(".vpn-status-container-list");
+    connectionStatusTooltip.setAttribute("title", connectionStatusLocalizedString);
 
     statusIconEls.forEach(el => {
       el.style.backgroundImage = mozillaVpnConnected ? connectedIndicatorSrc : disconnectedIndicatorSrc;
-      if (el.querySelector(".tooltip")) {
-        el.querySelector(".tooltip").textContent = connectionStatusLocalizedString;
-      } else {
-        el.textContent = connectionStatusLocalizedString;
-      }
     });
   },
 

src/js/popup.js

@@ -789,7 +789,6 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
             </div>
           </div>
           <span class="menu-text">${identity.name}</span>
-          <span class="tooltip proxy-unavailable"></span>
         </div>
         <span class="menu-right-float">
           <img alt="" class="always-open-in-flag flag-img" src="/img/flags/.png"/>

src/popup.html

@@ -154,7 +154,6 @@
       <div class="sub-header" data-i18n-message-id="containers"></div>
       <h4 class="moz-vpn-logotype vpn-status-container-list display-none">Mozilla VPN
         <span class="moz-vpn-connection-status-indicator container-list-status-icon">
-          <span class="tooltip"></span>
         </span>
       </h4>
     </div>