diff --git a/src/CanvasPage.css b/src/CanvasPage.css
index 0a22311..e5d238a 100644
--- a/src/CanvasPage.css
+++ b/src/CanvasPage.css
@@ -4,5 +4,4 @@
   bottom: 0.5rem;
   left: 0.5rem;
   right: 0.5rem;
-  overflow: hidden;
 }
diff --git a/src/EventTooltip.css b/src/EventTooltip.css
index f60e832..789736c 100644
--- a/src/EventTooltip.css
+++ b/src/EventTooltip.css
@@ -1,5 +1,5 @@
 .Tooltip {
-  position: absolute;
+  position: fixed;
   display: inline-block;
   border-radius: 0.125rem;
   max-width: 300px;
@@ -31,12 +31,20 @@
 }
 
 .DetailsGridURL {
+  word-break: break-all;
+  max-height: 50vh;
   overflow: hidden;
 }
 
+.FlamechartStackFrameName {
+  word-break: break-word;
+  margin-left: 0.4rem;
+}
+
 .ComponentName {
   font-weight: bold;
-  word-wrap: break-word;
+  word-break: break-word;
+  margin-right: 0.4rem;
 }
 
 .ComponentStack {
@@ -61,3 +69,11 @@
   white-space: pre;
   --gradient-height: 5em;
 }
+
+.ReactMeasureLabel {
+  margin-left: 0.4rem;
+}
+
+.UserTimingLabel {
+  word-break: break-word;
+}
diff --git a/src/EventTooltip.js b/src/EventTooltip.js
index a33c559..b46a9c1 100644
--- a/src/EventTooltip.js
+++ b/src/EventTooltip.js
@@ -157,7 +157,8 @@ const TooltipFlamechartNode = ({
   } = stackFrame;
   return (
     <div className={styles.Tooltip} ref={tooltipRef}>
-      {formatDuration(duration)} {trimComponentName(name)}
+      {formatDuration(duration)}
+      <span className={styles.FlamechartStackFrameName}>{name}</span>
       <div className={styles.DetailsGrid}>
         <div className={styles.DetailsGridLabel}>Timestamp:</div>
         <div>{formatTimestamp(timestamp)}</div>
@@ -202,7 +203,7 @@ const TooltipReactEvent = ({
         <span className={styles.ComponentName} style={{color}}>
           {trimComponentName(componentName)}
         </span>
-      )}{' '}
+      )}
       {label}
       <div className={styles.Divider} />
       <div className={styles.DetailsGrid}>
@@ -241,7 +242,8 @@ const TooltipReactMeasure = ({
 
   return (
     <div className={styles.Tooltip} ref={tooltipRef}>
-      {formatDuration(duration)} {label}
+      {formatDuration(duration)}
+      <span className={styles.ReactMeasureLabel}>{label}</span>
       <div className={styles.Divider} />
       <div className={styles.DetailsGrid}>
         <div className={styles.DetailsGridLabel}>Timestamp:</div>
@@ -267,7 +269,7 @@ const TooltipUserTimingMark = ({
   const {name, timestamp} = mark;
   return (
     <div className={styles.Tooltip} ref={tooltipRef}>
-      {name}
+      <span className={styles.UserTimingLabel}>{name}</span>
       <div className={styles.Divider} />
       <div className={styles.DetailsGrid}>
         <div className={styles.DetailsGridLabel}>Timestamp:</div>
diff --git a/src/utils/useSmartTooltip.js b/src/utils/useSmartTooltip.js
index 652721f..fede223 100644
--- a/src/utils/useSmartTooltip.js
+++ b/src/utils/useSmartTooltip.js
@@ -57,7 +57,7 @@ export default function useSmartTooltip({
         element.style.left = `${mouseX + TOOLTIP_OFFSET}px`;
       }
     }
-  });
+  }, [mouseX, mouseY, ref]);
 
   return ref;
 }