Skip to content

Commit 0c4e65d

Browse files
committed
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
1 parent 9cc562d commit 0c4e65d

File tree

1 file changed

+41
-41
lines changed

1 file changed

+41
-41
lines changed

notebook/static/tree/less/tree.less

+41-41
Original file line numberDiff line numberDiff line change
@@ -414,46 +414,46 @@ ul#new-menu {
414414
}
415415

416416
//TO show tooltips via keyboard for"Duplicate","View","Rename", "Download", "Shutdown", "Edit","Move", "Delete" buttons.
417+
.dynamic-buttons {
418+
.visually-hidden {
419+
clip-path: inset(100%);
420+
clip: rect(1px, 1px, 1px, 1px);
421+
height: 1px;
422+
overflow: hidden;
423+
position: absolute;
424+
white-space: nowrap;
425+
width: 1px;
426+
}
427+
428+
button:focus + [role="tooltip"] {
429+
visibility: visible;
430+
opacity: 1;
431+
}
417432

418-
.visually-hidden {
419-
clip-path: inset(100%);
420-
clip: rect(1px, 1px, 1px, 1px);
421-
height: 1px;
422-
overflow: hidden;
423-
position: absolute;
424-
white-space: nowrap;
425-
width: 1px;
426-
}
427-
428-
button:focus + [role="tooltip"] {
429-
visibility: visible;
430-
opacity: 1;
431-
}
432-
433-
.button-and-tooltip {
434-
position: relative;
435-
display: inline-block;
436-
}
437-
438-
[role="tooltip"] {
439-
/* Position the tooltip */
440-
position: absolute;
441-
top:70%;
442-
display:inline;
443-
//--------------
444-
visibility: hidden;
445-
width: 100px;
446-
background-color: #F0EFEF;
447-
color: #080808;
448-
text-align: center;
449-
padding: 3px;
450-
outline-color: grey;
451-
outline-offset: -2px;
452-
outline-style: auto;
453-
outline-width:1px;
454-
z-index: 1;
455-
opacity: 0;
456-
transition: opacity .6s;
457-
margin: 3px;
458-
font-size:10px;
433+
.button-and-tooltip {
434+
position: relative;
435+
display: inline-block;
436+
}
437+
438+
[role="tooltip"] {
439+
/* Position the tooltip */
440+
position: absolute;
441+
top:70%;
442+
display:inline;
443+
//--------------
444+
visibility: hidden;
445+
background-color: #F0EFEF;
446+
color: #080808;
447+
text-align: center;
448+
padding: 3px;
449+
outline-color: grey;
450+
outline-offset: -2px;
451+
outline-style: auto;
452+
outline-width:1px;
453+
z-index: 1;
454+
opacity: 0;
455+
transition: opacity .6s;
456+
margin: 3px;
457+
font-size:10px;
458+
}
459459
}

0 commit comments

Comments
 (0)