@bigfishtv/cockpit/styles/components/tooltip.less

@tooltip-arrow-size: 6px;

// Tooltip
[data-tooltip] {
	position: relative;
	display: inline-block;
	margin-left: 0.4rem;
	cursor: pointer;
	vertical-align: text-bottom;
	color: @light-grey;
	transition: color @transition-fast linear;

	svg {
		fill: currentcolor;
	}

	&:before,
	&:after {
		position: absolute;
		display: block;
		visibility: hidden;
		opacity: 0;
		transition: opacity @transition-fast linear, visibility @transition-fast linear;
		pointer-events: none;
	}

	&:before {
		z-index: 1001;
		border: @tooltip-arrow-size solid transparent;
		content: '';
		background: transparent;
	}

	&:after {
		z-index: 1000;
		padding: 0.8rem 0.4rem;
		min-width: 14rem;
		max-width: 24rem;
		content: attr(data-tooltip);
		.medium-font();
		.font-size(1.1);
		color: @white;
		line-height: @line-height-small;
		background: @dark;
		white-space: normal;
	}

	&:hover,
	&:focus {
		color: @dark;

		&:before,
		&:after {
			visibility: visible;
			opacity: 1;
		}
	}
}

// Tooltip Direction Top
[data-tooltip-direction='top'] {
	&:before,
	&:after {
		bottom: 100%;
		left: 50%;
	}

	&:before {
		border-top-color: @dark;
		.translate(-50%, 50%);
	}

	&:after {
		text-align: center;
		.translate(-50%, -@tooltip-arrow-size);
	}
}

// Tooltip Direction Right
[data-tooltip-direction='right'] {
	&:before,
	&:after {
		top: 50%;
		left: 100%;
		.translateY(-50%);
	}

	&:before {
		margin-left: -@tooltip-arrow-size;
		border-right-color: @dark;
	}

	&:after {
		margin-left: @tooltip-arrow-size;
		text-align: left;
	}
}

// Tooltip Direction Bottom
[data-tooltip-direction='bottom'] {
	&:before,
	&:after {
		top: 100%;
		left: 50%;
		.translateX(-50%);
	}

	&:before {
		margin-top: -(@tooltip-arrow-size * 2);
		border-bottom-color: @dark;
	}

	&:after {
		margin-top: @tooltip-arrow-size;
		text-align: center;
	}
}

// Tooltip Direction Left
[data-tooltip-direction='left'] {
	&:before,
	&:after {
		top: 50%;
		right: 100%;
		.translateY(-50%);
	}

	&:before {
		margin-right: -@tooltip-arrow-size;
		border-left-color: @dark;
	}

	&:after {
		margin-right: @tooltip-arrow-size;
		text-align: left;
	}
}