Template:Tooltip/styles.css: Difference between revisions

From Space Station 14 Wiki
(Created page with ".tooltip-display-text { position: relative; } .tooltip { position: absolute; top: 0; left: 0; transform: translate(50%, -100%); margin-bottom: .5rem; }")
 
(wip)
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
.tooltip-display-text-container {
position: relative;
}
.tooltip-display-text {
.tooltip-display-text {
position: relative;
/* set in template */
}
}


.tooltip {
.tooltip {
display: none;
position: absolute;
position: absolute;
top: 0;
top: -.5rem;
left: 0;
    left: 50%;
transform: translate(50%, -100%);
    transform: translate(-50%,-100%);
margin-bottom: .5rem;
width: max-content;
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-container:hover .tooltip {
display: inline-block;
}
}

Latest revision as of 03:14, 3 September 2024

.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;
	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-container:hover .tooltip {
	display: inline-block;
}