Template:Tooltip/styles.css - Revision history

Wikilah admin at 09:29, 1 October 2025

2025-10-01T09:29:40Z

← Older revision		Revision as of 17:29, 1 October 2025
Line 1:		Line 1:
	/* {{pp-template}} */		/* {{pp-template}} */

	.tooltip-dotted {
			/* Base: keep desktop exactly the same */
⚫	border-bottom: 1px dotted;
			.tooltip { position: relative; display: inline; }
	cursor: help;
		⚫	.tooltip-dotted { border-bottom: 1px dotted; cursor: help; }

			/* --- Mobile-only synthesized tooltip (no pointer-events used) --- */
			@media (hover: none) and (pointer: coarse) {

			/* Bubble text pulled from the existing title attribute */
			.tooltip[title]::after {
			content: attr(title);
			position: absolute;
			left: 50%;
			bottom: calc(100% + 8px);
			transform: translateX(-50%);
			z-index: 1000;

			background: rgba(0,0,0,0.85);
			color: #fff;
			padding: 6px 8px;
			border-radius: 4px;
			box-shadow: 0 2px 6px rgba(0,0,0,0.3);
			line-height: 1.2;
			font-size: 0.875em;
			max-width: 26rem;
			white-space: normal;
			text-align: left;

			opacity: 0;
			visibility: hidden;
			}

			/* Arrow */
			.tooltip[title]::before {
			content: "";
			position: absolute;
			left: 50%;
			bottom: calc(100% + 2px);
			transform: translateX(-50%);
			border: 6px solid transparent;
			border-top-color: rgba(0,0,0,0.85);

			opacity: 0;
			visibility: hidden;
			}

			/* Non-link: the <span> itself is focusable (tabindex=0) */
			.tooltip:focus::after,
			.tooltip:focus::before,
			.tooltip:active::after,
			.tooltip:active::before {
			opacity: 1;
			visibility: visible;
			}

			/* Link case: focus/active land on the surrounding <a> */
			a:focus > .tooltip[title]::after,
			a:focus > .tooltip[title]::before,
			a:active > .tooltip[title]::after,
			a:active > .tooltip[title]::before {
			opacity: 1;
			visibility: visible;
			}
	}		}

			/* Reduced-motion users (nothing to transition here, so nothing needed) */

Wikilah admin: Undo revision 790 by Wikilah admin (talk)

2025-10-01T08:05:16Z

Undo revision 790 by Wikilah admin (talk)

← Older revision		Revision as of 16:05, 1 October 2025
Line 1:		Line 1:
			/* {{pp-template}} */
	/* Keep same inline look; we only add a pseudo tooltip */
		⚫	.tooltip-dotted {
	.tooltip { position: relative; cursor: help; }
		⚫	border-bottom: 1px dotted;

			cursor: help;
	/* Dotted option without text-underline-offset */
⚫	~~.tooltip-dotted {~~ border-bottom: 1px dotted ~~currentColor~~; }
⚫	.tooltip-dotted a,
	.tooltip-dotted .rt-commentedText { border-bottom: inherit; }

	/* Draw tooltip using the attribute text; no native title anymore */
	.tooltip::after {
	content: attr(data-title);
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: 6px;
	padding: 6px 8px;
	background: #222;
	color: #fff;
	border-radius: 6px;
	font-size: 0.875em;
	line-height: 1.35;
	max-width: 90vw;
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
	z-index: 1000;

	opacity: 0;
	visibility: hidden;
	}		}

	/* Show on hover (desktop) */
	.tooltip:hover::after { opacity: 1; visibility: visible; }

	/* Show on focus (click/tap for non-links with tabindex=0) */
	.tooltip:focus::after { opacity: 1; visibility: visible; }

	/* Basic focus ring; outline-offset is not allowed, so keep it simple */
	.tooltip:focus { outline: 2px solid #99c2ff; }

Wikilah admin at 08:04, 1 October 2025

2025-10-01T08:04:14Z

← Older revision		Revision as of 16:04, 1 October 2025
Line 1:		Line 1:
			/* Keep same inline look; we only add a pseudo tooltip */
	/* {{pp-template}} */
			.tooltip { position: relative; cursor: help; }
⚫	.tooltip-dotted {

⚫	border-bottom: 1px dotted;
			/* Dotted option without text-underline-offset */
	cursor: help;
		⚫	.tooltip-dotted { border-bottom: 1px dotted currentColor; }
		⚫	.tooltip-dotted a,
			.tooltip-dotted .rt-commentedText { border-bottom: inherit; }

			/* Draw tooltip using the attribute text; no native title anymore */
			.tooltip::after {
			content: attr(data-title);
			position: absolute;
			left: 0;
			top: 100%;
			margin-top: 6px;
			padding: 6px 8px;
			background: #222;
			color: #fff;
			border-radius: 6px;
			font-size: 0.875em;
			line-height: 1.35;
			max-width: 90vw;
			box-shadow: 0 8px 24px rgba(0,0,0,.25);
			z-index: 1000;

			opacity: 0;
			visibility: hidden;
	}		}

			/* Show on hover (desktop) */
			.tooltip:hover::after { opacity: 1; visibility: visible; }

			/* Show on focus (click/tap for non-links with tabindex=0) */
			.tooltip:focus::after { opacity: 1; visibility: visible; }

			/* Basic focus ring; outline-offset is not allowed, so keep it simple */
			.tooltip:focus { outline: 2px solid #99c2ff; }

Wikilah admin: Undo revision 788 by Wikilah admin (talk)

2025-10-01T07:04:50Z

Undo revision 788 by Wikilah admin (talk)

← Older revision		Revision as of 15:04, 1 October 2025
Line 1:		Line 1:
	/* ~~Wrapper~~ */		/* {{pp-template}} */
		⚫	.tooltip-dotted {
	.tooltip { position: relative; display: inline-block; }
		⚫	border-bottom: 1px dotted;

		⚫	cursor: help;
	/* Term */
	.tooltip-target { cursor: help; }

	/* Dotted underline (sanitiser-safe) */
⚫	.tooltip-dotted ~~.tooltip-target~~ {
	text-decoration: none;
⚫	border-bottom: 1px dotted ~~currentColor~~;
	}

	/* Popup */
	.tooltip .tooltip-body {
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: 6px;
	padding: 6px 8px;
	background: #222;
	color: #fff;
	border-radius: 6px;
	font-size: 0.875em;
	line-height: 1.35;
	max-width: 90vw;
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
	z-index: 1000;

	opacity: 0;
	visibility: hidden;
	transform: translateY(3px);
	}

	/* Show on hover and on focus (no :focus-within) */
	.tooltip:hover .tooltip-body,
	.tooltip .tooltip-target:focus ~ .tooltip-body,
	.tooltip a:focus ~ .tooltip-body,
	.tooltip .tooltip-toggle:focus ~ .tooltip-body {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	}

	/* “ⓘ” toggle for link case (span, not <button>) */
	.tooltip .tooltip-toggle {
	margin-left: .25em;
	padding: 0 .25em;
	border: 0;
	background: none;
	font: inherit;
	line-height: 1;
⚫	cursor: ~~pointer~~;
	color: inherit;
	}

	/* Basic focus ring (omit outline-offset) */
	.tooltip-target:focus,
	.tooltip .tooltip-toggle:focus {
	outline: 2px solid #99c2ff;
	}		}

Wikilah admin at 07:03, 1 October 2025

2025-10-01T07:03:42Z

← Older revision		Revision as of 15:03, 1 October 2025
Line 1:		Line 1:
	/* ~~{{pp-template}}~~ */		/* Wrapper */
			.tooltip { position: relative; display: inline-block; }
⚫	.tooltip-dotted {

⚫	border-bottom: 1px dotted;
			/* Term */
⚫	cursor: ~~help~~;
			.tooltip-target { cursor: help; }

			/* Dotted underline (sanitiser-safe) */
		⚫	.tooltip-dotted .tooltip-target {
			text-decoration: none;
		⚫	border-bottom: 1px dotted currentColor;
			}

			/* Popup */
			.tooltip .tooltip-body {
			position: absolute;
			left: 0;
			top: 100%;
			margin-top: 6px;
			padding: 6px 8px;
			background: #222;
			color: #fff;
			border-radius: 6px;
			font-size: 0.875em;
			line-height: 1.35;
			max-width: 90vw;
			box-shadow: 0 8px 24px rgba(0,0,0,.25);
			z-index: 1000;

			opacity: 0;
			visibility: hidden;
			transform: translateY(3px);
			}

			/* Show on hover and on focus (no :focus-within) */
			.tooltip:hover .tooltip-body,
			.tooltip .tooltip-target:focus ~ .tooltip-body,
			.tooltip a:focus ~ .tooltip-body,
			.tooltip .tooltip-toggle:focus ~ .tooltip-body {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
			}

			/* “ⓘ” toggle for link case (span, not <button>) */
			.tooltip .tooltip-toggle {
			margin-left: .25em;
			padding: 0 .25em;
			border: 0;
			background: none;
			font: inherit;
			line-height: 1;
		⚫	cursor: pointer;
			color: inherit;
			}

			/* Basic focus ring (omit outline-offset) */
			.tooltip-target:focus,
			.tooltip .tooltip-toggle:focus {
			outline: 2px solid #99c2ff;
	}		}

Wikilah admin: Undo revision 783 by Wikilah admin (talk)

2025-10-01T06:50:16Z

Undo revision 783 by Wikilah admin (talk)

@@ Line 1: / Line 1: @@
-/* Base target */
+/* {{pp-template}} */
 .tooltip-dotted {
+}

Wikilah admin at 06:48, 1 October 2025

2025-10-01T06:48:38Z

@@ Line 1: / Line 1: @@
-/* {{pp-template}} */
+/* Base target */
 .tooltip-dotted {
+}

Wikilah admin: Created page with "/* {{pp-template}} */ .tooltip-dotted { border-bottom: 1px dotted; cursor: help; }"

2025-10-01T06:26:16Z

Created page with "{{pp-template}}: .tooltip-dotted { border-bottom: 1px dotted; cursor: help; }"

New page

/* {{pp-template}} */
.tooltip-dotted {
border-bottom: 1px dotted;
cursor: help;
}