Simplify tooltip layout

WebAssembly · Sep 1, 2022 · d6f040c · d6f040c
1 parent 5411df3
commit d6f040c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 23 deletions.
diff --git a/css/custom.css b/css/custom.css
@@ -2060,10 +2060,6 @@ pre code::before, pre code::after {
 
 .feature-tooltip {
   contain: layout style;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  flex-wrap: nowrap;
   text-align: left;
   text-align: start;
   white-space: normal;
@@ -2081,11 +2077,6 @@ pre code::before, pre code::after {
   z-index: 1;
 }
 
-.feature-tooltip-title {
-  font-size: 1.25em;
-  margin: 0 0 12px 0;
-}
-
 .feature-tooltip-arrow,
 .feature-tooltip-arrow::before {
   position: absolute;

diff --git a/roadmap.js b/roadmap.js
@@ -182,7 +182,7 @@
           const descId = nextUid();
           tooltipTasks.push((createPopper) => {
             const note = supported ? '✓ Supported' : '✗ Not supported';
-            detectResult.appendChild(buildTooltip(createPopper, detectResult, 'Current browser', note, descId));
+            detectResult.appendChild(buildTooltip(createPopper, detectResult, note, descId));
             detectResult.setAttribute('aria-describedby', descId);
           });
         }));
@@ -256,7 +256,7 @@
 
             const descId = nextUid();
             tooltipTasks.push((createPopper) => {
-              cell.appendChild(buildTooltip(createPopper, cell, browserName, note, descId));
+              cell.appendChild(buildTooltip(createPopper, cell, note, descId));
               cell.setAttribute('aria-describedby', descId);
             });
 
@@ -273,27 +273,20 @@
     return h('div', { className: `feature-cell icon-${type}`}, [content]);
   }
 
-  function buildTooltip(createPopper, cell, browserName, note, descId) {
-    const title = h('h4', { className: 'feature-tooltip-title' }, [browserName]);
-    title.setAttribute('aria-hidden', 'true');
-
-    const noteTag = h('div', { className: 'feature-tooltip-desc', id: descId });
-    noteTag.innerHTML = renderNote(note);
+  function buildTooltip(createPopper, cell, note, descId) {
+    const tooltip = h('div', { id: descId, className: 'feature-tooltip', role: 'tooltip' });
+    tooltip.innerHTML = renderNote(note);
 
     if (note.includes('introduced in unknown version')) {
-      noteTag.append(' ', h(
+      tooltip.append(' ', h(
         'a',
         { href: 'https://github.com/WebAssembly/website/blob/master/features.json', target: '_blank' },
         ['(contribute data)']
       ));
     }
 
     const arrow = h('div', { className: 'feature-tooltip-arrow' });
-    const tooltip = h('div', { className: 'feature-tooltip', role: 'tooltip' }, [
-      title,
-      noteTag,
-      arrow
-    ]);
+    tooltip.appendChild(arrow);
 
     const popper = createPopper(cell, tooltip, {
       placement: 'right',