This makes tooltips visible outside of the overflow container

I can't explain yet how it works but it does at least in chrome and firefox
mesosphere · Mar 10, 2016 · 4a685e1 · 4a685e1
1 parent ed2a8ee
commit 4a685e1
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 3 deletions.
diff --git a/src/css/components/app-modal.less b/src/css/components/app-modal.less
@@ -65,4 +65,7 @@
       background-image: url("img/icons/icon-help-inverse.svg");
     }
   }
+  .overflow-static {
+    position: static;  
+  }
 }
diff --git a/src/css/components/modal.less b/src/css/components/modal.less
@@ -37,7 +37,6 @@
 
     max-height: calc(~"80vh" - (@modal-header-height+@modal-footer-height));
     word-wrap: break-word;
-    overflow: auto;
 
     .row.full-bleed {
       margin-left: -@modal-body-padding;
@@ -85,6 +84,7 @@
   .tooltip-container {
     display: inline-block;
     margin-left: @horizontal-spacing-unit*0.5;
+    position: absolute;
 
     .icon {
       opacity: .4;

diff --git a/src/js/components/LocalVolumesComponent.jsx b/src/js/components/LocalVolumesComponent.jsx
@@ -84,7 +84,7 @@ var LocalVolumesComponent = React.createClass({
                 type="number"/>
             </FormGroupComponent>
           </div>
-          <div className="col-sm-8">
+          <div className="col-sm-8 overflow-static">
             <FormGroupComponent
                 fieldId={`localVolumes.containerPath.${i}`}
                 label={containerPathLabel}

diff --git a/src/js/components/OptionalPortsAndServiceDiscoveryComponent.jsx b/src/js/components/OptionalPortsAndServiceDiscoveryComponent.jsx
@@ -186,7 +186,7 @@ var OptionalPortsAndServiceDiscoveryComponent = React.createClass({
     });
 
     return (
-      <div className="col-sm-4">
+      <div className="col-sm-4 overflow-static">
         <FormGroupComponent className={portFieldClassSet}
             fieldId={`${fieldsetId}.${i}.port`}
             label={fieldLabel}