improve tooltip readability

micmro · Jun 9, 2017 · e055caa · e055caa
1 parent 18da565
commit e055caa
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/src/ts/waterfall/row/svg-row-subcomponents.ts b/src/ts/waterfall/row/svg-row-subcomponents.ts
@@ -68,8 +68,9 @@ function segmentToRectData(segment: WaterfallEntryTiming, rectData: RectData): R
     cssClass: timingTypeToCssClass(segment.type),
     height: (rectData.height - 6),
     hideOverlay: rectData.hideOverlay,
-    label: segment.type + " (" + Math.round(segment.start) + "ms - "
-    + Math.round(segment.end) + "ms | total: " + Math.round(segment.total) + "ms)",
+    label: `<strong>${segment.type}</strong><br/>` +
+    `${Math.round(segment.start)}ms - ${Math.round(segment.end)}ms<br/>` +
+    `total: ${Math.round(segment.total)}ms`,
     showOverlay: rectData.showOverlay,
     unit: rectData.unit,
     width: segment.total,

diff --git a/src/ts/waterfall/row/svg-tooltip.ts b/src/ts/waterfall/row/svg-tooltip.ts
@@ -38,7 +38,7 @@ export const onHoverInShowTooltip = (base: SVGRectElement, rectData: RectData, f
   const pxPerPerc = rowWidthPx / (rectData.width / rectData.unit);
   const percPerPx = (rectData.width / rectData.unit) / rowWidthPx;
   const isLeftOfRow = xPercInt > 50 && ((95 - xPercInt) * pxPerPerc < tooltipMaxWidth);
-  innerDiv.innerText = rectData.label;
+  innerDiv.innerHTML = rectData.label;
   // Disable animation for size-gathering
   addClass(innerDiv, "no-anim");
   foreignEl.style.display = "block";

diff --git a/src/ts/waterfall/svg-chart.ts b/src/ts/waterfall/svg-chart.ts
@@ -160,8 +160,9 @@ export function createWaterfallSvg(data: WaterfallData, options: ChartRenderOpti
       cssClass: requestTypeToCssClass(entry.responseDetails.requestType),
       height: options.rowHeight,
       hideOverlay: options.showAlignmentHelpers ? mouseListeners.onMouseLeavePartial : undefined,
-      label: `${entry.url} (${Math.round(entry.start)}ms - ` +
-        `${Math.round(entry.end)}ms | total: ${Math.round(entry.total)}ms)`,
+      label: `<strong>${entry.url}</strong><br/>` +
+        `${Math.round(entry.start)}ms - ${Math.round(entry.end)}ms<br/>` +
+        `total: ${Math.round(entry.total)}ms`,
       showOverlay: options.showAlignmentHelpers ? mouseListeners.onMouseEnterPartial : undefined,
       unit: context.unit,
       width: entryWidth,