.has-tooltip {
	position: relative;

	.tooltip {
		@include animate();
		opacity: 0;
		position: absolute;
		pointer-events: none;
		background: $overlay_dark;
		display: block;
		max-width: 200px;
		padding: 5px;
		color: $white;
		font-size: 11px;
		line-height: 11px;
		top: -24px;
		left: 1px;
		z-index: 97;
		border-radius: 3px;

		&::before {
			content: '';
			display: block;
			width: 6px;
			height: 6px;
			background: $overlay_dark;
			-ms-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			position: absolute;
			bottom: -3px;
			left: 9px;
		}
	}

	&:hover {
		.tooltip {
			opacity: 1;
			top: -22px;
		}
	}

	&.large-tooltip {
		.tooltip {
			padding: 8px 12px;
			font-size: 12px;
			line-height: 14px;
			top: -50px;
		}
	}
}