diff --git a/notebook/static/tree/less/tree.less b/notebook/static/tree/less/tree.less index 27f7123f2d..030aeaacb4 100644 --- a/notebook/static/tree/less/tree.less +++ b/notebook/static/tree/less/tree.less @@ -67,6 +67,8 @@ ul.breadcrumb { .dynamic-buttons { padding-top: @dashboard_tb_pad - 1px; display: inline-block; + width: 400px; + } .list_toolbar [class*="span"] { @@ -410,3 +412,48 @@ ul#new-menu { display: inline-block; padding-top: @dashboard_tb_pad; } + +//TO show tooltips via keyboard for"Duplicate","View","Rename", "Download", "Shutdown", "Edit","Move", "Delete" 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; +} + +.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; +} diff --git a/notebook/templates/tree.html b/notebook/templates/tree.html index 13468ffb93..fba0119968 100644 --- a/notebook/templates/tree.html +++ b/notebook/templates/tree.html @@ -41,14 +41,24 @@ {% trans %}Select items to perform actions on them.{% endtrans %}
- - - - - - - - + + + + + + + + + + + + + + + +
@@ -205,7 +215,10 @@ {% block script %} {{super()}} - + + {% endblock %}