A Pen by Samuel Janes on CodePen.
Created
May 17, 2017 00:33
-
-
Save CodeMyUI/4995aaa3cf25ad1c0ab3dd899d93eec6 to your computer and use it in GitHub Desktop.
CSS only tooltips
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$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