mytril/dist/styles/tooltip.css

Mytril Svelte library component for rapidly building modern websites based on Svelte and Sveltekit

.myt-tooltip {
	inset: 0px auto auto 0px;
	margin: 0px;
	position: fixed;
	z-index: 2000;
}

.myt-tooltip-content {
	--color: var(--myt-tooltip-c);
	--background-color: var(--myt-tooltip-bg);
	--border-size: thin;
	--border-color: var(--myt-tooltip-bg);
	--border-radius: var(--myt-tooltip-br);
	--font-size: 0.875rem;

	background-color: var(--background-color);
	color: var(--color);
	border-radius: var(--border-radius);
	border: var(--border-size) solid var(--border-color);
	font-size: var(--font-size);
	display: inline-block;
	width: auto;
	pointer-events: none;
	overflow-wrap: break-word;
	transition:
		color 0.5s,
		border-color 0.5s,
		background-color 0.5s;
	box-shadow: 0px 16px 29px -10px color-mix(in oklab, var(--color-scrim) 60%, transparent);
}

.myt-tooltip-content.myt-tooltip-content--default {
	padding: 0.15rem 0.625rem;
}

.myt-tooltip-content.myt-tooltip-content--compact {
	padding: 0.125rem 0.5rem;
}

.myt-tooltip-content.myt-tooltip-content--comfortable {
	padding: 0.35rem 0.75rem;
}

.myt-tooltip-content--arrow::after {
	content: ' ';
	position: absolute;
	border-style: solid;
}

.myt-tooltip-content--arrow.myt-tooltip-content--bottom::after,
.myt-tooltip-content--arrow.myt-tooltip-content--top::after {
	left: 50%;
	margin-left: -0.35rem;
	border-width: 0.35rem;
}

.myt-tooltip-content--arrow.myt-tooltip-content--bottom::after {
	bottom: 100%;
	border-color: transparent transparent var(--background-color) transparent;
}

.myt-tooltip-content--arrow.myt-tooltip-content--top::after {
	top: 100%;
	border-color: var(--background-color) transparent transparent transparent;
}

.myt-tooltip-content--arrow.myt-tooltip-content--left::after,
.myt-tooltip-content--arrow.myt-tooltip-content--right::after {
	top: 50%;
	margin-top: -0.35rem;
	border-width: 0.35rem;
}

.myt-tooltip-content--arrow.myt-tooltip-content--right::after {
	right: 100%;
	border-color: transparent var(--background-color) transparent transparent;
}

.myt-tooltip-content--arrow.myt-tooltip-content--left::after {
	left: 100%;
	border-color: transparent transparent transparent var(--background-color);
}

.myt-tooltip-content--top,
.myt-tooltip-content--bottom,
.myt-tooltip-content--right,
.myt-tooltip-content--left {
	animation-duration: 150ms;
	animation-name: enter;
}

.myt-tooltip-content--top {
	--animate-enter-pos1: 0;
	--animate-enter-pos2: 0.5rem;
	--animate-enter-pos3: 0;
}

.myt-tooltip-content--bottom {
	--animate-enter-pos1: 0;
	--animate-enter-pos2: -0.5rem;
	--animate-enter-pos3: 0;
}

.myt-tooltip-content--right {
	--animate-enter-pos1: -0.5rem;
	--animate-enter-pos2: 0;
	--animate-enter-pos3: 0;
}

.myt-tooltip-content--left {
	--animate-enter-pos1: 0.5rem;
	--animate-enter-pos2: 0;
	--animate-enter-pos3: 0;
}

@keyframes enter {
	0% {
		opacity: 0;
		transform: translate3d(
				var(--animate-enter-pos1),
				var(--animate-enter-pos2),
				var(--animate-enter-pos3)
			)
			scale3d(0.95, 0.95, 0.95) rotate(0);
	}
}