diff --git a/muni.css b/muni.css index fd62fd4..9d6b260 100644 --- a/muni.css +++ b/muni.css @@ -26,3 +26,49 @@ textarea { textarea:disabled { color: black; } + +/* Tooltip container */ +.tooltip { + position: relative; + display: inline-block; + border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ +} + +/* Tooltip text */ +.tooltip .tooltiptext { + visibility: hidden; + width: 240px; + background-color: rgba(62,62,62,0.91); + color: #fff; + text-align: center; + padding: 5px 5px 5px 5px; + border-radius: 6px; + + /* Position the tooltip text */ + position: absolute; + z-index: 1; + top: -100%; + left: 105%; + + /* Fade in tooltip */ + opacity: 0; + transition: opacity 0.3s; +} + +/* Tooltip arrow */ +.tooltip .tooltiptext::after { + content: " "; + position: absolute; + top: 50%; + right: 100%; /* To the left of the tooltip */ + margin-top: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent rgba(62,62,62,0.91) transparent transparent; +} + +/* Show the tooltip text when you mouse over the tooltip container */ +.tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; +}