Template:Tooltip/tooltip.css - Revision history

Editor at 21:57, 5 April 2026

2026-04-05T21:57:50Z

← Older revision		Revision as of 21:57, 5 April 2026
Line 3:		Line 3:
	display: inline-block;		display: inline-block;
	cursor: help;		cursor: help;
			text-decoration: underline dotted; /* underline dotted like <abbr> */
	}		}

Editor at 21:55, 5 April 2026

2026-04-05T21:55:39Z

← Older revision		Revision as of 21:55, 5 April 2026
Line 3:		Line 3:
	display: inline-block;		display: inline-block;
	cursor: help;		cursor: help;
	~~text-decoration: underline dotted; /* like <abbr> */~~
	}		}

Line 15:		Line 14:
	position: absolute;		position: absolute;
	z-index: 1;		z-index: 1;
			bottom: 125%;
	left: 50%;		left: 50%;
	transform: translateX(-50%);		transform: translateX(-50%);
	opacity: 0;		opacity: 0;
	transition: opacity 0.3s;		transition: opacity 0.3s;
	white-space: normal;		white-space: normal; /* allow wrapping */
	max-width: 300px;		max-width: 300px; /* optional: limit width */
	}		}

	/* ~~Default position: above~~ */		/* Tooltip arrow */
	.tooltip .tooltiptext~~.above {~~		.tooltip .tooltiptext::after {
	~~bottom: 125%;~~
	}
	~~.tooltip .tooltiptext.above~~::after {
	content: "";		content: "";
	position: absolute;		position: absolute;
	top: 100%; ~~/* arrow points down */~~		top: 100%;
	left: 50%;		left: 50%;
	margin-left: -5px;		margin-left: -5px;
Line 36:		Line 33:
	border-style: solid;		border-style: solid;
	border-color: #000 transparent transparent transparent;		border-color: #000 transparent transparent transparent;
	}

	~~/* Alternate position: below */~~
	~~.tooltip .tooltiptext.below {~~
	~~top: 125%;~~
	}
	~~.tooltip .tooltiptext.below::after {~~
	~~content: "";~~
	~~position: absolute;~~
	~~bottom: 100%; /* arrow points up */~~
	~~left: 50%;~~
	~~margin-left: -5px;~~
	~~border-width: 5px;~~
	~~border-style: solid;~~
	~~border-color: transparent transparent #000 transparent;~~
	}		}

Editor at 21:54, 5 April 2026

2026-04-05T21:54:41Z

← Older revision		Revision as of 21:54, 5 April 2026
Line 27:		Line 27:
	bottom: 125%;		bottom: 125%;
	}		}

	.tooltip .tooltiptext.above::after {		.tooltip .tooltiptext.above::after {
	content: "";		content: "";
	position: absolute;		position: absolute;
	top: 100%;		top: 100%; /* arrow points down */
	left: 50%;		left: 50%;
	margin-left: -5px;		margin-left: -5px;
Line 43:		Line 42:
	top: 125%;		top: 125%;
	}		}

	.tooltip .tooltiptext.below::after {		.tooltip .tooltiptext.below::after {
	content: "";		content: "";
	position: absolute;		position: absolute;
	bottom: 100%;		bottom: 100%; /* arrow points up */
	left: 50%;		left: 50%;
	margin-left: -5px;		margin-left: -5px;

Editor at 21:53, 5 April 2026

2026-04-05T21:53:33Z

← Older revision		Revision as of 21:53, 5 April 2026
Line 3:		Line 3:
	display: inline-block;		display: inline-block;
	cursor: help;		cursor: help;
			text-decoration: underline dotted; /* like <abbr> */
	}		}

Line 14:		Line 15:
	position: absolute;		position: absolute;
	z-index: 1;		z-index: 1;
	~~bottom: 125%;~~
	left: 50%;		left: 50%;
	transform: translateX(-50%);		transform: translateX(-50%);
	opacity: 0;		opacity: 0;
	transition: opacity 0.3s;		transition: opacity 0.3s;
	white-space: normal; ~~/* allow wrapping */~~		white-space: normal;
	max-width: 300px; /* ~~optional~~: ~~limit width~~ */		max-width: 300px;
			}

			/* Default position: above */
			.tooltip .tooltiptext.above {
			bottom: 125%;
	}		}

	~~/* Tooltip arrow */~~		.tooltip .tooltiptext.above::after {
	.tooltip .tooltiptext::after {
	content: "";		content: "";
	position: absolute;		position: absolute;
Line 33:		Line 37:
	border-style: solid;		border-style: solid;
	border-color: #000 transparent transparent transparent;		border-color: #000 transparent transparent transparent;
			}

			/* Alternate position: below */
			.tooltip .tooltiptext.below {
			top: 125%;
			}

			.tooltip .tooltiptext.below::after {
			content: "";
			position: absolute;
			bottom: 100%;
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: transparent transparent #000 transparent;
	}		}

Editor at 21:50, 5 April 2026

2026-04-05T21:50:19Z

← Older revision		Revision as of 21:50, 5 April 2026
Line 1:		Line 1:
	~~/* Tooltip container */~~
	.tooltip {		.tooltip {
	position: relative;		position: relative;
Line 6:		Line 5:
	}		}

	~~/* Tooltip text */~~
	.tooltip .tooltiptext {		.tooltip .tooltiptext {
	visibility: hidden;		visibility: hidden;
	~~width: 180px;~~		background-color: #000; /* pure black */
	background-color: #~~333~~;
	color: #fff;		color: #fff;
	text-align: center;		text-align: center;
Line 19:		Line 16:
	bottom: 125%;		bottom: 125%;
	left: 50%;		left: 50%;
	~~margin-left~~: -~~90px~~;		transform: translateX(-50%);
	opacity: 0;		opacity: 0;
	transition: opacity 0.3s;		transition: opacity 0.3s;
			white-space: normal; /* allow wrapping */
			max-width: 300px; /* optional: limit width */
	}		}

Line 33:		Line 32:
	border-width: 5px;		border-width: 5px;
	border-style: solid;		border-style: solid;
	border-color: #~~333~~ transparent transparent transparent;		border-color: #000 transparent transparent transparent;
	}		}

Editor: Created page with "/* Tooltip container / .tooltip { position: relative; display: inline-block; cursor: help; } / Tooltip text / .tooltip .tooltiptext { visibility: hidden; width: 180px; background-color: #333; color: #fff; text-align: center; border-radius: 6px; padding: 6px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -90px; opacity: 0; transition: opacity 0.3s; } / Tooltip arrow */ .tooltip .tooltiptext::after { content..."

2026-04-05T21:45:53Z

Created page with "Tooltip container: .tooltip { position: relative; display: inline-block; cursor: help; } Tooltip text: .tooltip .tooltiptext { visibility: hidden; width: 180px; background-color: #333; color: #fff; text-align: center; border-radius: 6px; padding: 6px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -90px; opacity: 0; transition: opacity 0.3s; } Tooltip arrow: .tooltip .tooltiptext::after { content..."

New page

/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
cursor: help;
}

/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 180px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -90px;
opacity: 0;
transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}

/* Show tooltip on hover */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}