diff --git a/src/app/components/background/background.component.css b/src/app/components/background/background.component.css index b49be73..44c9b2a 100644 --- a/src/app/components/background/background.component.css +++ b/src/app/components/background/background.component.css @@ -31,3 +31,46 @@ min-width: 1.5em; text-align: center; } +.tooltip-container { + position: relative; + /* Necessário para posicionar a tooltip */ + display: inline-block; +} + +.tooltip { + visibility: hidden; + opacity: 0; + position: absolute; + bottom: 125%; + /* Posiciona acima do ícone */ + left: 50%; + transform: translateX(-50%); + background-color: #686565ee; + color: #fff; + text-align: center; + padding: 0.25em 0.5em; + border-radius: 1em; + font-size: 0.75em; + line-height: 1.2; + white-space: nowrap; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); + transition: opacity 0.3s ease, visibility 0.3s ease; + z-index: 10; +} + +.tooltip-container:hover .tooltip { + visibility: visible; + opacity: 1; +} + +.tooltip::after { + content: ''; + position: absolute; + top: 95%; + /* Aparece abaixo da tooltip */ + left: 50%; + transform: translateX(-50%); + border-width: 6px; + border-style: solid; + border-color: #686565ee transparent transparent transparent; +} \ No newline at end of file diff --git a/src/app/components/background/background.component.html b/src/app/components/background/background.component.html index 9405cac..b595120 100644 --- a/src/app/components/background/background.component.html +++ b/src/app/components/background/background.component.html @@ -1,17 +1,13 @@