Template:Tooltip/styles.css

.tooltip-display-text-container {
	position: relative;
}

.tooltip-display-text {
	/* set in template */
}

.tooltip {
	display: none;
	
	position: absolute;
	top: -.5rem;
    left: 50%;
    transform: translate(-50%,-100%);
	
	width: max-content;
    max-width: 20em;
	padding: .35rem;

    background-color: var(--bg-color-light-x4);
    border: 1px solid var(--border-color-light-x2);

    box-shadow: 0 1px 5px 1px var(--bg-color);
}

.tooltip-display-text {
	--col: var(--green-color-light);
	--text-decoration: underline 1px dashed var(--col);
	text-decoration: var(--text-decoration);
}

.tooltip-display-text-container:hover .tooltip {
	display: inline-block;
}