CSS only tooltips

css-only-tooltips.markdown

CSS only tooltips

A Pen by Samuel Janes on CodePen.

License.

index.html

<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>	

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.sass

$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