Make global tooltip styles class-scoped

- Change the scope of styles specific to `.dynamic-buttons` to that class only (introed in https://github.com/jupyter/notebook/pull/4729)
- Drop the width style from tooltips since `display: inline` makes it have no effect

Fixes #5670
pull/5672/head
magda 6 years ago
parent 9cc562d339
commit 0c4e65d2c5

@ -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;
}
}

Loading…
Cancel
Save