And even further

ui/src/shared/components/AnnotationInput.js

@@ -55,7 +55,7 @@ class AnnotationInput extends Component {
     const {value} = this.props
 
     return (
-      <div className="annotation-tooltip--input">
+      <div className="annotation-tooltip--input-container">
         {isEditing
           ? <form
               onSubmit={this.handleFormSubmit}

ui/src/shared/components/AnnotationSpan.js

@@ -94,6 +94,7 @@ class AnnotationSpan extends React.Component {
     const isEditing = this.props.mode === EDITING
     const humanTime = `${new Date(+startTime)}`
     const {isDragging} = this.state
+    const {annotation} = this.props
 
     const flagClass = isDragging
       ? 'annotation-span--left-flag dragging'
@@ -112,6 +113,12 @@ class AnnotationSpan extends React.Component {
         data-time-ms={startTime}
         data-time-local={humanTime}
       >
+        <AnnotationTooltip
+          isEditing={isEditing}
+          annotation={annotation}
+          onMouseLeave={this.handleMouseLeave}
+          annotationState={this.state}
+        />
         <div
           className={clickClass}
           draggable={true}
@@ -130,6 +137,7 @@ class AnnotationSpan extends React.Component {
     const isEditing = this.props.mode === EDITING
     const humanTime = `${new Date(+endTime)}`
     const {isDragging} = this.state
+    const {annotation} = this.props
 
     const flagClass = isDragging
       ? 'annotation-span--right-flag dragging'
@@ -147,6 +155,12 @@ class AnnotationSpan extends React.Component {
         data-time-ms={endTime}
         data-time-local={humanTime}
       >
+        <AnnotationTooltip
+          isEditing={isEditing}
+          annotation={annotation}
+          onMouseLeave={this.handleMouseLeave}
+          annotationState={this.state}
+        />
         <div
           className={clickClass}
           draggable={true}
@@ -163,17 +177,10 @@ class AnnotationSpan extends React.Component {
 
   render() {
     const {annotation, dygraph} = this.props
-    const isEditing = this.props.mode === EDITING
 
     return (
       <div>
         <AnnotationWindow annotation={annotation} dygraph={dygraph} />
-        <AnnotationTooltip
-          isEditing={isEditing}
-          annotation={annotation}
-          onMouseLeave={this.handleMouseLeave}
-          annotationState={this.state}
-        />
         {this.renderLeftMarker(annotation.startTime, dygraph)}
         {this.renderRightMarker(annotation.endTime, dygraph)}
       </div>

ui/src/shared/components/AnnotationTooltip.js

@@ -7,7 +7,7 @@ import * as schema from 'shared/schemas'
 import * as actions from 'shared/actions/annotations'
 
 const TimeStamp = ({time}) =>
-  <div className="annotation-tooltip--timestmap">
+  <div className="annotation-tooltip--timestamp">
     {`${moment(+time).format('YYYY/DD/MM HH:mm:ss.SS')}`}
   </div>
 

ui/src/style/components/annotations.scss

@@ -11,6 +11,7 @@ $timestamp-font-weight: 600;
 
 .annotation-point--flag {
   position: absolute;
+  z-index: 2;
   top: -3px;
   left: -2px;
   width: 6px;
@@ -28,6 +29,7 @@ $timestamp-font-weight: 600;
 
 .annotation-span--flag {
   position: absolute;
+  z-index: 2;
   top: -6px;
   width: 0;
   height: 0;
@@ -50,6 +52,10 @@ $timestamp-font-weight: 600;
   &.dragging {
     border-left-color: $annotation-color__drag;
   }
+
+  &:hover {
+    border-left-color: red;
+  }
 }
 
 .annotation-span--right-flag {
@@ -64,22 +70,20 @@ $timestamp-font-weight: 600;
 }
 
 
-
+// width: 100%;
 .annotation-tooltip {
-  position: absolute;
+  position: absolute;  
-  width: 100%;  
   bottom: calc(100% + 6px);
   left: 50%;
   transform: translateX(-50%);
   background-color: $g0-obsidian;
+  z-index: 3;
   padding: 6px 12px;
   border-radius: 4px;
   white-space: nowrap;
   user-select: none;
   display: flex;
-  flex: 1 0 0;
   box-shadow: 0 0 10px 2px $g2-kevlar;
-  margin-bottom: 4px;
 
   &:before {
     content: '';
@@ -89,6 +93,7 @@ $timestamp-font-weight: 600;
     height: calc(100% + 28px);
     top: -14px;
     left: -8px;
+    z-index: -1;
   }
 
   &.hidden {
@@ -126,6 +131,14 @@ $timestamp-font-weight: 600;
   }
 }
 
+.annotation-tooltip--input {
+  flex: 1 0 0;
+}
+.annotation-tooltip--input-container {
+  width: 100%;
+  margin-bottom: 4px;
+}
+
 .annotation-tooltip--input .input-cte {
   height: 22px;
   font-size: 12px;
@@ -162,7 +175,7 @@ $timestamp-font-weight: 600;
 .annotation {
   position: absolute;
   top: 8px;
-  z-index: 5;
+  z-index: 3;
   background-color: $annotation-color;
   height: calc(100% - 36px);
   width: 2px;
@@ -172,6 +185,7 @@ $timestamp-font-weight: 600;
 
   &.dragging {
     background-color: $annotation-color__drag;
+    z-index: 4;
   }
 }
 
@@ -181,6 +195,7 @@ $timestamp-font-weight: 600;
   left: -7px;
   width: 16px;
   height: 16px;
+  z-index: 4;
   cursor: default;
 
   &.editing {
@@ -197,6 +212,7 @@ $timestamp-font-weight: 600;
   background: linear-gradient(to bottom, $window15 0%, $window0 100%);
   height: calc(100% - 36px);
   border-top: 2px dotted $window35;
+  z-index: 1;
 }
 
 
@@ -227,6 +243,7 @@ $timestamp-font-weight: 600;
   transform: translateX(-1px);
   background: linear-gradient(to bottom, $c-hydrogen 0%, $c-pool 100%);
   transition: opacity 0.4s ease;
+  z-index: 5;
   cursor: pointer;
 }
 
@@ -241,6 +258,7 @@ $timestamp-font-weight: 600;
   bottom: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%);
+  z-index: 10;
 }
 .new-annotation.hover .new-annotation-tooltip {
   display: flex;