:root {
	--tooltip-background: white;
	--tooltip-border-color: black;
	--tooltip-border-width: 1px;
	--tooltip-arrow-width: 7px;
	--tooltip-offset-right: 0px;
	--tooltip-offset-left: 0px;
}

.custom-tooltip {
	position: relative;
	display: inline-block;
}

.tooltip-text {
	visibility: hidden;
	position: absolute;
	width: max-content;
	background-color: var(--tooltip-background);
	border-radius: .4rem;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.5s;
	font-size: .9rem;
	line-height: 1rem;
}

.tooltip-border {
	border: var(--tooltip-border-width) solid var(--tooltip-border-color);
}

.tooltip-right {
	left: 105%;
	margin-left: .5rem;
}

.tooltip-left {
	right: 105%; 
	margin-right: .5rem;
}

.tooltip-bottom {
	top: 105%;
	margin-top: .5rem;
}

.custom-tooltip:hover .tooltip-text {
	opacity: 1;
	visibility: visible;
}

*[class*="tooltip-arrow"]::before {
	content: " ";
	z-index: 10001;
	position: absolute;
	border-style: solid;
	border-color: transparent;
}

.tooltip-arrow-up::before {
	bottom: 100%;
	left: 50%;
	margin-left: calc(2px - var(--tooltip-arrow-width) + var(--tooltip-offset-right) - var(--tooltip-offset-left));
	border-width: var(--tooltip-arrow-width);
	border-bottom-color: var(--tooltip-background);
}

.tooltip-arrow-down::before {
	top: 100%;
	left: 50%;
	margin-left: calc(2px - var(--tooltip-arrow-width) + var(--tooltip-offset-right) - var(--tooltip-offset-left));
	border-width: var(--tooltip-arrow-width);
	border-top-color: var(--tooltip-background);
}

.tooltip-arrow-left::before {
	top: 50%;
	right: 100%;
	margin-top: calc(2px - var(--tooltip-arrow-width));
	border-width: var(--tooltip-arrow-width);
	border-right-color: var(--tooltip-background);
}

.tooltip-arrow-right::before {
	top: 50%;
	left: 100%;
	margin-top: calc(2px - var(--tooltip-arrow-width));
	border-width: var(--tooltip-arrow-width);
	border-left-color: var(--tooltip-background);
}

.tooltip-border[class*="tooltip-arrow"]::after {
	content: " ";
	z-index: 10000;
	position: absolute;
	border-style: solid;
	border-color: transparent;
}

.tooltip-border.tooltip-arrow-up::after {
	bottom: 100%;
	left: 50%;
	margin-left: calc(2px - var(--tooltip-arrow-width) - var(--tooltip-border-width) + var(--tooltip-offset-right) - var(--tooltip-offset-left));
	border-width: calc(var(--tooltip-arrow-width) + var(--tooltip-border-width));
	border-bottom-color: var(--tooltip-border-color);
}

.tooltip-border.tooltip-arrow-down::after {
	top: 100%;
	left: 50%;
	margin-left: calc(2px - var(--tooltip-arrow-width) - var(--tooltip-border-width) + var(--tooltip-offset-right) - var(--tooltip-offset-left));
	border-width: calc(var(--tooltip-arrow-width) + var(--tooltip-border-width));
	border-top-color: var(--tooltip-border-color);
}

.tooltip-border.tooltip-arrow-left::after {
	top: 50%;
	right: 100%;
	margin-top: calc(2px - var(--tooltip-arrow-width) - var(--tooltip-border-width));
	border-width: calc(var(--tooltip-arrow-width) + var(--tooltip-border-width));
	border-right-color: var(--tooltip-border-color);
}

.tooltip-border.tooltip-arrow-right::after {
	top: 50%;
	left: 100%;
	margin-top: calc(2px - var(--tooltip-arrow-width) - var(--tooltip-border-width));
	border-width: calc(var(--tooltip-arrow-width) + var(--tooltip-border-width));
	border-left-color: var(--tooltip-border-color);
}