Extract reusable Tooltip component and improve mobile responsiveness.

client/src/app.js

@@ -542,6 +542,7 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
     })
 
     on('.table-copy-button', 'click', { preventDefault: true }).subscribe(e => e.stopPropagation())
+    on('.tooltip', 'click', { preventDefault: true }).subscribe(e => e.stopPropagation())
 
     on('.toggle-container', 'click').subscribe(({ ownerTarget: burgerMenu }) => {
       burgerMenu.classList.toggle('open-menu');
@@ -564,12 +565,19 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
     })
 
     document.addEventListener('click', e => {
+      const activeTooltip = document.activeElement
+      if (activeTooltip && activeTooltip.classList.contains('tooltip') && !e.target.closest('.tooltip')) {
+        activeTooltip.blur()
+      }
       if (e.target.closest('.main-nav-container')) return
       closeNetworkMenus()
     })
 
     document.addEventListener('keydown', e => {
-      if (e.key == 'Escape') closeNetworkMenus()
+      if (e.key == 'Escape') {
+        closeNetworkMenus()
+        document.activeElement && document.activeElement.classList.contains('tooltip') && document.activeElement.blur()
+      }
 
       const hasModifier = e.metaKey || e.ctrlKey
       , noExtraModifiers = !e.altKey && !e.shiftKey

client/src/components/info-card.js

@@ -1,3 +1,5 @@
+import { Tooltip } from "./tooltip";
+
 export const InfoCard = ({
   title,
   tooltip,
@@ -16,12 +18,7 @@ export const InfoCard = ({
     <div className="info-card-header">
       {iconSrc ? <img className="menu-logo" alt="" src={iconSrc} /> : null}
       <p className="info-card-title">{title}</p>
-      {tooltip ? (
-        <div className="tooltip">
-          <img alt="" src={tooltip.iconSrc} />
-          <div className="tooltip-dialogue">{tooltip.text}</div>
-        </div>
-      ) : null}
+      {tooltip ? <Tooltip iconSrc={tooltip.iconSrc} text={tooltip.text} /> : null}
       {headerValue !== undefined ? (
         <p className="info-card-header-value">{headerValue}</p>
       ) : null}

client/src/components/tooltip.js

@@ -0,0 +1,10 @@
+export const Tooltip = ({ iconSrc, text }) => (
+  <button
+    type="button"
+    className="tooltip"
+    aria-label={`More information: ${text}`}
+  >
+    <img alt="" src={iconSrc} />
+    <span className="tooltip-dialogue" role="tooltip">{text}</span>
+  </button>
+);

client/src/views/blocks.js

@@ -6,6 +6,7 @@ import {
 } from "./util";
 import loader from "../components/loading";
 import { BlockIcon, ClockIcon, CopyIcon } from "../components/icons";
+import { Tooltip } from "../components/tooltip";
 
 const staticRoot = process.env.STATIC_ROOT || "";
 
@@ -86,12 +87,10 @@ export const blks = (blocks, viewMore, { t, ...S }) => (
                         <p className="usage-number">
                           {getBlockPercentageUsed(b.weight)}%
                         </p>
-                        <div className="tooltip">
-                          <img src={`${staticRoot}img/icons/tooltip.svg`} />
-                          <div className="tooltip-dialogue">
-                            How full this block is.
-                          </div>
-                        </div>
+                        <Tooltip
+                          iconSrc={`${staticRoot}img/icons/tooltip.svg`}
+                          text="How full this block is."
+                        />
                       </div>
                       <div className="usage-bar">
                         <div

client/src/views/difficulty-adjustment.js

@@ -1,5 +1,6 @@
 import { ArrowsInSimpleIcon } from "../components/icons";
 import { InfoCard } from "../components/info-card";
+import { Tooltip } from "../components/tooltip";
 import { difficultyPeriod } from "../const";
 
 const staticRoot = process.env.STATIC_ROOT || "";
@@ -198,8 +199,8 @@ const adjustmentStat = (title, value, className = "") => (
   </div>
 );
 
-const statDivider = () => (
-  <div className="difficulty-adjustment-stat-divider"></div>
+const statDivider = (className) => (
+  <div className={["difficulty-adjustment-stat-divider", className || ""].join(" ")}></div>
 );
 
 export default ({
@@ -236,10 +237,10 @@ export default ({
             <ArrowsInSimpleIcon />
           </div>
           <h1 className="table-header-title">Difficulty Adjustment</h1>
-          <div className="tooltip">
-            <img alt="" src={`${staticRoot}img/icons/tooltip.svg`} />
-            <div className="tooltip-dialogue">How hard it is to mine new blocks. Bitcoin retargets mining difficulty every 2,016 blocks to keep blocks near 10 minutes. Current is the projected next change; Previous was the last change.</div>
-          </div>
+          <Tooltip
+            iconSrc={`${staticRoot}img/icons/tooltip.svg`}
+            text="How hard it is to mine new blocks. Bitcoin retargets mining difficulty every 2,016 blocks to keep blocks near 10 minutes. Current is the projected next change; Previous was the last change."
+          />
         </div>
         <div className="difficulty-adjustment-stats">
           {adjustmentStat("AVERAGE BLOCK TIME", averageBlockTime)}
@@ -251,7 +252,7 @@ export default ({
             adjustmentClass(expected),
           )}
 
-          {statDivider()}
+          {statDivider("difficulty-adjustment-stat-divider-middle")}
           {adjustmentStat(
             "PREVIOUS ADJ",
             formatAdjustment(previous),

client/src/views/transactions.js

@@ -45,24 +45,36 @@ export const transactions = (txs, viewMore, { t, ...S }) => (
             return (
               <a href={`tx/${txOverview.txid}`}>
               <div className={`transaction-table-row ${S.newTxEntries && S.newTxEntries[txOverview.txid] ? "new-table-entry" : ""}`}>
-                <div className="transaction-table-transaction-id">
-                  <p>{truncateTxid(txOverview.txid)}</p>
-                  <div
-                    className="table-copy-button code-button-btn"
-                    role="button"
-                    tabindex="0"
-                    data-clipboardCopy={txOverview.txid}
-                    aria-label={`Copy transaction id ${txOverview.txid}`}
-                  >
-                    <CopyIcon />
+                <div className="transaction-table-field transaction-table-transaction-id">
+                  <div className="transaction-table-field-label">{t`TX ID`}</div>
+                  <div className="transaction-table-field-value">
+                    <p>{truncateTxid(txOverview.txid)}</p>
+                    <div
+                      className="table-copy-button code-button-btn"
+                      role="button"
+                      tabindex="0"
+                      data-clipboardCopy={txOverview.txid}
+                      aria-label={`Copy transaction id ${txOverview.txid}`}
+                    >
+                      <CopyIcon />
+                    </div>
                   </div>
                 </div>
-                <div className="transaction-table-transaction-value">
-                  {txOverview.value ?
-                    formatSat(txOverview.value) : "Confidential"}
+                <div className="transaction-table-field transaction-table-transaction-value">
+                  <div className="transaction-table-field-label">{t`VALUE`}</div>
+                  <div className="transaction-table-field-value">
+                    {txOverview.value ?
+                      formatSat(txOverview.value) : "Confidential"}
+                  </div>
+                </div>
+                <div className="transaction-table-field transaction-table-transaction-size">
+                  <div className="transaction-table-field-label">{t`SIZE`}</div>
+                  <div className="transaction-table-field-value">{`${formatNumber(txOverview.vsize)} vB`}</div>
+                </div>
+                <div className={`transaction-table-field transaction-table-transaction-fee ${feeClass}`}>
+                  <div className="transaction-table-field-label">{t`FEE`}</div>
+                  <div className="transaction-table-field-value">{`${feerate.toFixed(2)} sat/vB`}</div>
                 </div>
-                <div className="transaction-table-transaction-size">{`${formatNumber(txOverview.vsize)} vB`}</div>
-                <div className={`transaction-table-transaction-fee ${feeClass}`}>{`${feerate.toFixed(2)} sat/vB`}</div>
               </div>
               </a>
             );