Custom Tooltips

HTML

<div class="tooltip">
	<span>Top</span>
	<span class="tooltip_text || tooltip_top">Tooltip text</span>
</div>
<div class="tooltip">
	<span>Right</span>
	<span class="tooltip_text || tooltip_right">Tooltip text</span>
</div>
<div class="tooltip">
	<span>Bottom</span>
	<span class="tooltip_text || tooltip_bottom">Tooltip text</span>
</div>
<div class="tooltip">
	<span>Left</span>
	<span class="tooltip_text || tooltip_left">Tooltip text</span>
</div>

CSS

.tooltip{display:inline-block;color:#31344b;border-bottom:.1rem dotted #31344b;position:relative}
.tooltip .tooltip_text{position:absolute;opacity:0;visibility:hidden;display:inline-block;padding:.5rem 2rem;font-size:1.4rem;-webkit-border-radius:.5rem;-moz-border-radius:.5rem;border-radius:.5rem;background-color:#fff;text-align:center;z-index:1;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;min-width:12rem;max-width:35rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;-webkit-box-shadow:-.05rem -.05rem .3rem 0 rgba(0,0,0,.2);-moz-box-shadow:-.05rem -.05rem .3rem 0 rgba(0,0,0,.2);box-shadow:-.05rem -.05rem .3rem 0 rgba(0,0,0,.2)}
.tooltip .tooltip_text::after{content:'';position:absolute;display:block;width:1rem;height:1rem;background-color:#fff;-webkit-box-shadow:.15rem .15rem 0 0 rgba(0,0,0,.1);-moz-box-shadow:.15rem .15rem 0 0 rgba(0,0,0,.1);box-shadow:.15rem .15rem 0 0 rgba(0,0,0,.1)}

.tooltip .tooltip_text.tooltip_top{bottom:100%;left:50%;-webkit-transform:translate(-50%,-2rem);-moz-transform:translate(-50%,-2rem);-ms-transform:translate(-50%,-2rem);-o-transform:translate(-50%,-2rem);transform:translate(-50%,-2rem)}
.tooltip .tooltip_text.tooltip_top::after{bottom:0;left:50%;-webkit-transform:translate(-50%,50%) rotate(45deg);-moz-transform:translate(-50%,50%) rotate(45deg);-ms-transform:translate(-50%,50%) rotate(45deg);-o-transform:translate(-50%,50%) rotate(45deg);transform:translate(-50%,50%) rotate(45deg)}

.tooltip .tooltip_text.tooltip_right{top:50%;left:100%;-webkit-transform:translate(3rem,-50%);-moz-transform:translate(3rem,-50%);-ms-transform:translate(3rem,-50%);-o-transform:translate(3rem,-50%);transform:translate(3rem,-50%)}
.tooltip .tooltip_text.tooltip_right::after{left:-.5rem;top:50%;-webkit-transform:translate(0,-50%) rotate(135deg);-moz-transform:translate(0,-50%) rotate(135deg);-ms-transform:translate(0,-50%) rotate(135deg);-o-transform:translate(0,-50%) rotate(135deg);transform:translate(0,-50%) rotate(135deg)}

.tooltip .tooltip_text.tooltip_bottom{top:100%;left:50%;-webkit-transform:translate(-50%,3rem);-moz-transform:translate(-50%,3rem);-ms-transform:translate(-50%,3rem);-o-transform:translate(-50%,3rem);transform:translate(-50%,3rem)}
.tooltip .tooltip_text.tooltip_bottom::after{top:-.5rem;left:50%;-webkit-transform:translate(-50%,0) rotate(-135deg);-moz-transform:translate(-50%,0) rotate(-135deg);-ms-transform:translate(-50%,0) rotate(-135deg);-o-transform:translate(-50%,0) rotate(-135deg);transform:translate(-50%,0) rotate(-135deg)}

.tooltip .tooltip_text.tooltip_left{top:50%;right:100%;-webkit-transform:translate(-3rem,-50%);-moz-transform:translate(-3rem,-50%);-ms-transform:translate(-3rem,-50%);-o-transform:translate(-3rem,-50%);transform:translate(-3rem,-50%)}
.tooltip .tooltip_text.tooltip_left::after{right:-.5rem;top:50%;-webkit-transform:translate(0,-50%) rotate(-45deg);-moz-transform:translate(0,-50%) rotate(-45deg);-ms-transform:translate(0,-50%) rotate(-45deg);-o-transform:translate(0,-50%) rotate(-45deg);transform:translate(0,-50%) rotate(-45deg)}

.tooltip:hover .tooltip_text{opacity:1;visibility:visible}
.tooltip:hover .tooltip_text.tooltip_top{-webkit-transform:translate(-50%,-1rem);-moz-transform:translate(-50%,-1rem);-ms-transform:translate(-50%,-1rem);-o-transform:translate(-50%,-1rem);transform:translate(-50%,-1rem)}
.tooltip:hover .tooltip_text.tooltip_right{-webkit-transform:translate(1.5rem,-50%);-moz-transform:translate(1.5rem,-50%);-ms-transform:translate(1.5rem,-50%);-o-transform:translate(1.5rem,-50%);transform:translate(1.5rem,-50%)}
.tooltip:hover .tooltip_text.tooltip_bottom{-webkit-transform:translate(-50%,1.5rem);-moz-transform:translate(-50%,1.5rem);-ms-transform:translate(-50%,1.5rem);-o-transform:translate(-50%,1.5rem);transform:translate(-50%,1.5rem)}
.tooltip:hover .tooltip_text.tooltip_left{-webkit-transform:translate(-1.5rem,-50%);-moz-transform:translate(-1.5rem,-50%);-ms-transform:translate(-1.5rem,-50%);-o-transform:translate(-1.5rem,-50%);transform:translate(-1.5rem,-50%)}

SCSS

.tooltip {
	display: inline-block;
	color: #31344b;
	border-bottom: .1rem dotted #31344b;
	position: relative;
	
	.tooltip_text {
		position: absolute;
		opacity: 0;
		visibility: hidden;
		display: inline-block;
		padding: 0.5rem 2rem;
		font-size: 1.4rem;
		border-radius: 0.5rem;
		background-color: #fff;
		text-align: center;
		z-index: 1;
		transition: all .3s ease-in-out;
		min-width: 12rem;
		max-width: 35rem;
		width: max-content;
		box-shadow: -0.05rem -0.05rem 0.3rem 0 rgba(0, 0, 0, .2);
		
		&::after {
			content: '';
			position: absolute;
			display: block;
			width: 1rem;
			height: 1rem;
			background-color: #ffffff;
			box-shadow: 0.15rem 0.15rem 0 0 rgba(0, 0, 0, .1);
		}
		
		&.tooltip_top {
			bottom: 100%;
			left: 50%;
			transform: translate(-50%, -2rem);
			
			&::after {
				bottom: 0;
				left: 50%;
				transform: translate(-50%, 50%)rotate(45deg);
			}
		}
		
		&.tooltip_right {
			top: 50%;
			left: 100%;
			transform: translate(3rem, -50%);
			
			&::after {
				left: -0.5rem;
				top: 50%;
				transform: translate(0, -50%) rotate(135deg);
			}
		}
		
		&.tooltip_bottom {
			top: 100%;
			left: 50%;
			transform: translate(-50%, 3rem);
			
			&::after {
				top: -.5rem;
				left: 50%;
				transform: translate(-50%, 0) rotate(-135deg);
			}
		}
		
		&.tooltip_left {
			top: 50%;
			right: 100%;
			transform: translate(-3rem, -50%);
			
			&::after {
				right: -0.5rem;
				top: 50%;
				transform: translate(0, -50%) rotate(-45deg);
			}
		}
	}
	
	&:hover {
		.tooltip_text {
			opacity: 1;
			visibility: visible;
			
			&.tooltip_top {
				transform: translate(-50%, -1rem);
			}
			
			&.tooltip_right {
				transform: translate(1.5rem, -50%);
			}
			
			&.tooltip_bottom {
				transform: translate(-50%, 1.5rem);
			}
			
			&.tooltip_left {
				transform: translate(-1.5rem, -50%);
			}
		}
	}
}