Make global tooltip styles class-scoped

- Change the scope of styles specific to `.dynamic-buttons` to that class only (introed in jupyter#4729) - Drop the width style from tooltips since `display: inline` makes it have no effect Fixes jupyter#5670
magdapoppins · Aug 12, 2020 · 0c4e65d · 0c4e65d
1 parent 9cc562d
commit 0c4e65d
Showing 1 changed file with 41 additions and 41 deletions.
diff --git a/notebook/static/tree/less/tree.less b/notebook/static/tree/less/tree.less
@@ -414,46 +414,46 @@ ul#new-menu {
 }
 
 //TO show tooltips via keyboard for"Duplicate","View","Rename", "Download", "Shutdown", "Edit","Move", "Delete" buttons.
+.dynamic-buttons {
+    .visually-hidden {
+        clip-path: inset(100%);
+        clip: rect(1px, 1px, 1px, 1px);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    button:focus + [role="tooltip"] {
+        visibility: visible;
+        opacity: 1;
+    }
 
-.visually-hidden {
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-button:focus + [role="tooltip"] {  
-visibility: visible;
- opacity: 1;
-}
-
-.button-and-tooltip {
-  position: relative;
-  display: inline-block;
-}
-
-[role="tooltip"] {
-/* Position the tooltip */
-position: absolute;
-top:70%;
-display:inline;
-//--------------
-visibility: hidden;
-width: 100px;
-background-color: #F0EFEF;
-color: #080808;
-text-align: center;
-padding: 3px;
-outline-color: grey;
-outline-offset: -2px;
-outline-style: auto;
-outline-width:1px;
- z-index: 1;
- opacity: 0;
- transition: opacity .6s;
- margin: 3px;
- font-size:10px;
+    .button-and-tooltip {
+        position: relative;
+        display: inline-block;
+    }
+
+    [role="tooltip"] {
+        /* Position the tooltip */
+        position: absolute;
+        top:70%;
+        display:inline;
+        //--------------
+        visibility: hidden;
+        background-color: #F0EFEF;
+        color: #080808;
+        text-align: center;
+        padding: 3px;
+        outline-color: grey;
+        outline-offset: -2px;
+        outline-style: auto;
+        outline-width:1px;
+        z-index: 1;
+        opacity: 0;
+        transition: opacity .6s;
+        margin: 3px;
+        font-size:10px;
+    }
 }