Tooltips

HTML
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,400,400i,700,700i" rel="stylesheet"> <div class="content"> <div class="row"> <a href="#" class="btn tooltip top"> <span>TOOLTIP TOP</span> <span class="tooltip-content">Lorem ipsum dolor sit amet</span> </a> </div> <div class="row"> <a href="#" class="btn tooltip bottom"> <span>TOOLTIP BOTTOM</span> <span class="tooltip-content">Lorem ipsum dolor sit amet</span> </a> </div> <div class="row"> <a href="#" class="btn tooltip right"> <span>TOOLTIP RIGHT</span> <span class="tooltip-content">Lorem ipsum dolor sit amet</span> </a> </div> <div class="row"> <a href="#" class="btn tooltip left"> <span>TOOLTIP LEFT</span> <span class="tooltip-content">Lorem ipsum dolor sit amet</span> </a> </div> </div>
SCSS
.content { align-items: center; box-sizing: border-box; display: flex; flex-direction: column; height: 100vh; font-family: 'Fira Sans', sans-serif; justify-content: center; padding: 2rem 0; width: 100vw; } .row { display: flex; margin: auto; } a { text-decoration: none; } .btn { margin: 0 .5em; } /* COLORS */ $white: #ffffff; $gray-light: #cdd2d6; $black: #000000; $blue: #05a8ff; $orange: #ff7033; $red: #f7404f; $green: #49c562; $shadow: rgba(205,210,214,.8); /* BUTTONS */ .btn { align-items: center; background-color: white; border: 1px solid $gray-light; box-sizing: border-box; color: $black; display: flex; height: 45px; letter-spacing: 2px; padding: .8em 1em; transition: all .3s ease; &:hover { background-color: $blue; border-color: $blue; color: $white; } } /* TOOLTIP */ .tooltip { position: relative; overflow: hidden; &:hover { overflow: visible; .tooltip-content { opacity: 1; } } .tooltip-content { background: $blue; box-shadow: 0 5px 25px 5px $shadow; box-sizing: border-box; color: $white; font-size: 12px; line-height: 1.2; letter-spacing: 1px; max-width: 200px; min-width: 145px; padding: 1em; position: absolute; opacity: 0; transition: all .3s ease; &::after { background: $blue; content: ""; height: 10px; position: absolute; transform: rotate(45deg); width: 10px; } } &.top { .tooltip-content { bottom: calc(100% + 1.5em); left: 50%; transform: translateX(-50%); &::after { bottom: -5px; left: 50%; margin-left: -5px; } } } &.bottom { .tooltip-content { bottom: calc(-100% - 1.8em); left: 50%; transform: translateX(-50%); &::after { top: -5px; } } } &.right { .tooltip-content { left: calc(100% + 1.5em); top: 50%; transform: translateY(-50%); &::after { left: -5px; margin-top: -5px; top: 50%; } } } &.left { .tooltip-content { right: calc(100% + 1.5em); top: 50%; transform: translateY(-50%); &::after { right: -5px; margin-top: -5px; top: 50%; } } } }
JAVASCRIPT
Expand for more options Login