diff --git a/src/styles/_global.scss b/src/styles/_global.scss index 34bdfb3..790523f 100644 --- a/src/styles/_global.scss +++ b/src/styles/_global.scss @@ -128,14 +128,23 @@ button { &:hover::after, &:focus-visible::after { position: absolute; - transform: translateX(10px); content: attr(data-tooltip); color: white; background: black; + border-radius: 0.5em; + margin: 0 0.75em; padding: 0.5em; + max-width: 300px; + z-index: 100; + + @media screen and (max-width: $breakpointSm) { + left: 50%; + transform: translate(-50%, 3ex); + text-align: center; + } } }