@tooltipColor  : #383838;
@arrowSize     : 6px;
@arrowPosition : 18px;
[data-tooltip] {
	position:relative;
	.tooltip(attr(data-tooltip));
}
[data-tooltip-top] {
	position:relative;
	.tooltipTop(attr(data-tooltip-top));
}
[data-tooltip-bottom] {
	position:relative;
	.tooltipBottom(attr(data-tooltip-bottom));
}
[data-tooltip-left] {
	position:relative;
	.tooltipLeft(attr(data-tooltip-left));
}
[data-tooltip-right] {
	position:relative;
	.tooltipRight(attr(data-tooltip-right));
}
.tooltip(@content) {
	.tooltipBottom(@content);
}
.tooltipTop(@content) {
	.tooltipBase(@content);
	&::before {
		margin-bottom    : -@arrowSize * 2;
		border-top-color : @tooltipColor;
	}
	&::after { margin-left : -18px; }
	&::before, &::after {
		bottom : 100%;
		left   : 50%;
		translate: -50% 0;
	}
	&:hover::after, &:hover::before, &:focus::after, &:focus::before {
		.transform(translateY(-(@arrowSize + 2)));
	}
}
.tooltipBottom(@content) {
	.tooltipBase(@content);
	&::before {
		margin-top          : -@arrowSize * 2;
		border-bottom-color : @tooltipColor;
	}
	&::after { margin-left : -18px; }
	&::before, &::after {
		top  : 100%;
		left : 50%;
		translate: -50% 0;
	}
	&:hover::after, &:hover::before, &:focus::after, &:focus::before {
		.transform(translateY(@arrowSize + 2));
	}
}
.tooltipLeft(@content) {
	.tooltipBase(@content);
	&::before {
		margin-right      : -@arrowSize * 2;
		margin-bottom     : -@arrowSize;
		border-left-color : @tooltipColor;
	}
	&::after {
		margin-bottom : -14px;
		max-width   : 50ch;
	}
	&::before, &::after {
		right  : 100%;
		bottom : 50%;
	}
	&:hover::after, &:hover::before, &:focus::after, &:focus::before {
		.transform(translateX(-(@arrowSize + 2)));
	}
}
.tooltipRight(@content) {
	.tooltipBase(@content);
	&::before {
		margin-bottom      : -@arrowSize;
		margin-left        : -@arrowSize * 2;
		border-right-color : @tooltipColor;
	}
	&::after {
		margin-bottom : -14px;
		max-width   : 50ch;
	}
	&::before, &::after {
		top : 50%;
		left   : 100%;
		translate:0 -50%;
	}
	&:hover::after, &:hover::before, &:focus::after, &:focus::before {
		.transform(translateX(@arrowSize + 2));
	}
}
.tooltipShow(){ }
.tooltipBase(@content) {
	//position: relative;
	&::before, &::after {
		.animateAll();
		position       : absolute;
		z-index        : 1000000;
		pointer-events : none;
		opacity        : 0;
	}
	//Arrow
	&::before {
		z-index    : 1000001;
		content    : '';
		background : transparent;
		border     : @arrowSize solid transparent;
	}
	//Box
	&::after {
		visibility  : hidden;
		padding     : 8px 10px;
		font-size   : 12px;
		line-height : 12px;
		color       : white;
		content     : @content;
		background  : @tooltipColor;
		max-width   : 60ch;
		width		:max-content;
		word-break	: break-word;
		overflow-wrap : break-word;
	}
	&:hover::before, &:hover::after {
		visibility : visible;
		opacity    : 1;
	}
}