footnotes/css/dev-amp-tooltips.css

/*<?php for docblocks
/**
 * Additional stylesheet for AMP compatible tooltips.
 *
 * - Adding: Tooltips: make display work purely by style rules for AMP compatibility, thanks to @milindmore22 code contribution.
 * - Bugfix: Tooltips: enable accessibility by keyboard navigation, thanks to @westonruter code contribution.
 *
 * @since 2.5.11 (draft)
 * @since 2.6.0  (release)
 *
 * @contributor @milindmore22
 * @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785306933
 *
 * @contributor @westonruter
 * @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785419655
 *
 * To streamline internal CSS, immutable rules are in external stylesheet.
 * Property values of settings are internal CSS.
 * @see class/task.php
 *
 * System of unified minified style sheets tailored to the instance.
 * @see dev-common.css.
 */

span.footnote_referrer > span.footnote_tooltip {
	visibility: hidden;
	opacity: 0;
	transition-property: visibility, opacity;

	/*
	transition-delay: 500ms;
	transition-duration: 1s;
*/
}

span.footnote_referrer:focus-within > span.footnote_tooltip,
span.footnote_referrer:hover > span.footnote_tooltip {
	visibility: visible;
	opacity: 1;
	transition-property: visibility, opacity;

	/*
	transition-delay: 0;
	transition-duration: 200ms;
*/
}

/**
 * Position.
 *
 * Values are defined by internal CSS.
 * @see class/task.php
 */

.footnote_referrer.relative {
	position: relative;
}

.footnote_tooltip.position {
	display: unset;
	position: absolute;

	/*
	bottom: 24px;
	left: -50px;
	width: 400px;
*/
}