1. Tutorials
  2. CSS
  3. Pure CSS Tooltips

Pure CSS Tooltips

In this tutorial, you will learn how to create tooltips or info text popup using pure CSS. Watch the video below for a detailed tutorial.

HTML

<body>
  <div class="tooltips">
    <p><span data-tooltip="Lorem Ipsum Dolor Sit Amet" class="top">Top</span></p>
    <p><span data-tooltip="Lorem Ipsum Dolor Sit Amet" class="left">Left</span></p>
    <p><span data-tooltip="Lorem Ipsum Dolor Sit Amet" class="right">Right</span></p>
    <p><span data-tooltip="Lorem Ipsum Dolor Sit Amet" class="bottom">Bottom</span></p>
  </div>
</body>

CSS

body {
	background-color: #2E3537;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Arial', sans-serif;
}

.tooltips p {
	text-align: center;
	margin-bottom: 20px;
}

.tooltips span {
	font-size: 24px;
	color: white;
}

span[data-tooltip] {
	position: relative;
	cursor: default;
}

span[data-tooltip].top:before, span[data-tooltip].top:after {
	transform: translateY(10px);
}

span[data-tooltip].top:hover:before, span[data-tooltip].top:hover:after {
	transform: translateY(0px);
}

span[data-tooltip].left:before, span[data-tooltip].left:after {
	transform: translateX(0px);
}

span[data-tooltip].left:hover:before, span[data-tooltip].left:hover:after {
	transform: translateX(-10px);
}

span[data-tooltip].right:before, span[data-tooltip].right:after {
	transform: translateX(0px);
}

span[data-tooltip].right:hover:before, span[data-tooltip].right:hover:after {
	transform: translateX(10px);
}

span[data-tooltip].bottom:before, span[data-tooltip].bottom:after {
	transform: translateY(-10px);
}

span[data-tooltip].bottom:hover:before, span[data-tooltip].bottom:hover:after {
	transform: translateY(0px);
}

span[data-tooltip]:after, span[data-tooltip]:before {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	z-index: 999;
	transition: transform 200ms ease, opacity 200ms;
}

span[data-tooltip]:before {
	content: attr(data-tooltip);
	background: black;
	color: white;
	font-size: 10px;
	padding: 10px;
	border-radius: 5px;
	width: 130px;
	max-width: 130px;
}

span[data-tooltip]:after {
	content: '';
	width: 0;
	height: 0;
	border: 6px solid transparent;
}

span[data-tooltip]:hover:before, span[data-tooltip]:hover:after {
	visibility: visible;
	opacity: 1;
	transform: translateY(0px);
}

span[data-tooltip].top:before {
	bottom: 100%;
	left: -60px;
	margin-bottom: 10px;
}

span[data-tooltip].top:after {
	border-top-color: black;
	border-bottom: none;
	bottom: 100%;
	left: calc(50% - 6px);
	margin-bottom: 4px;
}

span[data-tooltip].left:before {
	top: -18%;
	right: 100%;
	margin-right: 10px;
}

span[data-tooltip].left:after {
	border-left-color: black;
	border-right: none;
	top: calc(50% - 3px);
	right: 100%;
	margin-top: -6px;
	margin-right: 4px;
}

span[data-tooltip].right:before {
	top: -10%;
	left: 100%;
	margin-left: 10px;
}

span[data-tooltip].right:after {
	border-right-color: black;
	border-left: none;
	top: calc(50% - 6px);
	left: calc(100% + 4px);
}

span[data-tooltip].bottom:before {
	top: 100%;
	left: -50%;
	margin-top: 10px;
}

span[data-tooltip].bottom:after {
	border-bottom-color: black;
	border-top: none;
	top: 100%;
	left: calc(50% - 6px);
	margin-top: 4px;
}