Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS only tooltips
<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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment