diff --git a/isso/css/admin.css b/isso/css/admin.css index e834545a..8a8de477 100644 --- a/isso/css/admin.css +++ b/isso/css/admin.css @@ -176,3 +176,67 @@ a { width: 100%; margin-top: 1em; } + + +.search-tooltip { + position: relative; + display: inline-block; + cursor: pointer; + user-select: none; +} + +.search-tooltip-icon { + display: inline-block; + width: 1.2em; + height: 1.2em; + border-radius: 50%; + background: #fffaf3; + font-family: serif; + font-weight: bold; + text-align: center; + color: #000; +} + +.search-tooltip .search-tooltip-text { + visibility: hidden; + width: 370px; + background-color: #555; + color: #fff; + text-align: left; + border-radius: 6px; + padding: 8px; + position: absolute; + z-index: 1; + bottom: 125%; + left: 50%; + margin-left: -185px; +} + +/* Tooltip arrow */ +.search-tooltip .search-tooltip-text::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #555 transparent transparent transparent; +} + +.search-tooltip .show { + visibility: visible; + -webkit-animation: fadeIn 1s; + animation: fadeIn 1s; +} + +/* Add animation (fade in the tooltip) */ +@-webkit-keyframes fadeIn { + from {opacity: 0;} + to {opacity: 1;} +} + +@keyframes fadeIn { + from {opacity: 0;} + to {opacity:1 ;} +} \ No newline at end of file diff --git a/isso/js/admin.js b/isso/js/admin.js index 5b1e5086..e6cc6462 100644 --- a/isso/js/admin.js +++ b/isso/js/admin.js @@ -125,3 +125,7 @@ function send_edit(com_id, hash, isso_host_script) { stop_edit(com_id, true); } +function toggleTooltip(tooltipContainer) { + const tooltipText = tooltipContainer.querySelector(".search-tooltip-text"); + tooltipText.classList.toggle("show"); +} \ No newline at end of file diff --git a/isso/templates/admin.html b/isso/templates/admin.html index a849ccdf..b799f3e2 100644 --- a/isso/templates/admin.html +++ b/isso/templates/admin.html @@ -74,7 +74,14 @@

Administration