CSS only tooltips
A Pen by Samuel Janes on CodePen.
A Pen by Samuel Janes on CodePen.
<div class='center'> | |
<div class='field'> | |
<button class='has-tooltip'>This is a button</button> | |
<span class='tooltip blue'><p>This is a blue tooltip</p></span> | |
</div> | |
<div class='field'> | |
<button class='has-tooltip'>This is a button</button> | |
<span class='tooltip red'> | |
<p>This is a red tooltip</p> | |
<img src="http://www.placehold.it/1920X1080" /> | |
</span> | |
</div> | |
<div class='field'> | |
<button class='has-tooltip'>This is a button</button> | |
<span class='tooltip green'> | |
<p>This is a green tooltip</p> | |
</span> | |
</div> | |
<div class='field'> | |
<button class='has-tooltip'>This is a button</button> | |
<span class='tooltip purple'> | |
<p>This is a purple tooltip</p> | |
</span> | |
</div> | |
</div> |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
$blue: #47b8e0 | |
$red: #E71D36 | |
$green: #2EC4B6 | |
$purple: #A593E0 | |
* | |
box-sizing: border-box | |
body | |
min-height: 100vh | |
display: flex | |
justify-content: center | |
align-items: center | |
body, button, input, textarea, select | |
font-family: 'Raleway', sans-serif | |
.center | |
width: 100% | |
max-width: 1200px | |
text-align: center | |
margin: auto | |
display: flex | |
justify-content: center | |
flex-wrap: wrap | |
padding: 20px | |
button, .btn, input[type='submit'] | |
padding: 20px 60px | |
border: none | |
outline: none | |
background: $blue | |
transition: 0.15s ease-in-out | |
color: white | |
text-decoration: none | |
border-radius: 5px | |
display: inline-block | |
&:hover, &:focus | |
background: darken($blue, 10%) | |
.has-tooltip:hover + .tooltip, | |
.has-tooltip:focus + .tooltip, | |
.has-tooltip.hover + .tooltip | |
opacity: 1 | |
transform: translate(-50%, -100%) scale(1) rotate(0deg) | |
pointer-events: inherit | |
.tooltip | |
display: block | |
position: absolute | |
top: 0px | |
left: 50% | |
transform: translate(-50%, -50%) scale(0.75) rotate(5deg) | |
transform-origin: bottom center | |
padding: 10px 30px | |
border-radius: 5px | |
background: rgba(0,0,0,0.75) | |
text-align: center | |
color: white | |
transition: 0.15s ease-in-out | |
opacity: 0 | |
width: 100% | |
max-width: 100vw | |
pointer-events: none | |
z-index: 5 | |
&.blue | |
background: rgba($blue, 0.75) | |
&:after | |
border-top: 5px solid rgba($blue,0.75) | |
&.red | |
background: rgba($red, 0.75) | |
&:after | |
border-top: 5px solid rgba($red,0.75) | |
&.green | |
background: rgba($green, 0.75) | |
&:after | |
border-top: 5px solid rgba($green,0.75) | |
&.purple | |
background: rgba($purple, 0.75) | |
&:after | |
border-top: 5px solid rgba($purple,0.75) | |
&:hover | |
opacity: 1 | |
transform: translate(-50%, -100%) scale(1) rotate(0deg) | |
pointer-events: inherit | |
img | |
max-width: 100% | |
&:after | |
content: '' | |
display: block | |
margin: 0 auto | |
widtH: 0 | |
height: 0 | |
border: 5px solid transparent | |
border-top: 5px solid rgba(0,0,0,0.75) | |
position: absolute | |
bottom: 0 | |
left: 50% | |
transform: translate(-50%, 100%) | |
.field | |
position: relative | |
padding: 20px |