Development preview 2.6.0d1 with AMP compat at work.

Stable Tag is 2.5.10. v2.6.0d0 does already exist on SVN (2456650 2021-01-14).
Tooltip timing settings are not yet usable in AMP mode.
Tooltip transitions don’t work now, only delays, need to debug.
It’s late and we have a deadline, so this is committed as a preview.
Thanks for looking into it.

git-svn-id: https://plugins.svn.wordpress.org/footnotes/trunk@2497297 b8457f37-d9ea-0310-8a92-e5e31aec5664

class/dashboard/subpage-main.php

@@ -131,6 +131,7 @@ class MCI_Footnotes_Layout_Settings extends MCI_Footnotes_Layout_Engine {
 		$l_arr_meta_boxes = array();
 
 		// Sync box name with mirror in task.php.
+		$l_arr_meta_boxes[] = $this->add_meta_box( 'settings', 'amp-compat', __( 'AMP compatibility', 'footnotes' ), 'amp_compat' );
 		$l_arr_meta_boxes[] = $this->add_meta_box( 'settings', 'start-end', __( 'Footnote start and end short codes', 'footnotes' ), 'start_end' );
 		$l_arr_meta_boxes[] = $this->add_meta_box( 'settings', 'numbering', __( 'Footnotes numbering', 'footnotes' ), 'Numbering' );
 		$l_arr_meta_boxes[] = $this->add_meta_box( 'settings', 'scrolling', __( 'Scrolling behavior', 'footnotes' ), 'Scrolling' );
@@ -164,6 +165,31 @@ class MCI_Footnotes_Layout_Settings extends MCI_Footnotes_Layout_Engine {
 		return $l_arr_meta_boxes;
 	}
 
+	/**
+	 * Displays the AMP compatibility mode option.
+	 *
+	 * @since 2.6.0
+	 */
+	public function amp_compat() {
+
+		// Load template file.
+		$l_obj_template = new MCI_Footnotes_Template( MCI_Footnotes_Template::C_STR_DASHBOARD, 'settings-amp' );
+		// Replace all placeholders.
+		$l_obj_template->replace(
+			array(
+				'label-amp'       => $this->add_label( MCI_Footnotes_Settings::C_STR_FOOTNOTES_AMP_COMPATIBILITY_ENABLE, __( 'Enable AMP compatibility mode:', 'footnotes' ) ),
+				'amp'             => $this->add_checkbox( MCI_Footnotes_Settings::C_STR_FOOTNOTES_AMP_COMPATIBILITY_ENABLE ),
+				'notice-amp'      => __( 'This option enables hard links with scroll offset.', 'footnotes' ),
+				// Translators: '%s' is the logogram of Footnotes.
+				'description-amp' => sprintf( __( '%s is now fully functional on AMP pages and websites in all modes including Standard mode, except animated scrolling but with scroll offset in screen height per cent as configured, styled tooltips and reference container expand/collapse.', 'footnotes' ), '<span style="font-style: normal;">' . MCI_Footnotes_Config::C_STR_PLUGIN_PUBLIC_NAME . '</span>' ),
+			)
+		);
+		// Display template with replaced placeholders.
+		// phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped
+		echo $l_obj_template->get_content();
+		// phpcs:enable
+	}
+
 	/**
 	 * Displays all settings for the reference container.
 	 *

class/init.php

@@ -38,29 +38,82 @@ class MCI_Footnotes {
 	public $a_obj_task = null;
 
 	/**
-	 * Idenfifies whether tooltips are enabled. Actual value depends on settings.
+	 * Allows to determine whether tooltips are enabled.
+	 * The actual value of these properties is configurable and depends on settings.
+	 *
+	 * - Bugfix: Templates: optimize template load and processing based on settings, thanks to @misfist code contribution.
+	 *
+	 * @since 2.4.0
+	 * @date 2021-01-04T1355+0100
 	 *
 	 * @contributor Patrizia Lutz @misfist
+	 * @link https://wordpress.org/support/topic/template-override-filter/#post-13864301
+	 * @link https://github.com/misfist/footnotes/releases/tag/2.4.0d3 repository
+	 * @link https://github.com/misfist/footnotes/compare/2.4.0%E2%80%A62.4.0d3 diff
+	 *
 	 * @var bool
 	 *
-	 * @todo Refactor to have defines and assignments only in this class,
+	 * Template process and script / stylesheet load optimization.
-	 * then re-use these properties also in class/task.php (and elsewhere).
+	 * Streamline process depending on tooltip enabled status.
-	 * Account for priority level issues. These properties must be assigned before
+	 * Load tooltip inline script only if jQuery tooltips are enabled.
-	 * the hooks—whose priority level may be configured to 0—are called in class/task.php.
 	 */
 	public static $a_bool_tooltips_enabled = false;
 
 	/**
-	 * Idenfifies whether alternative tooltips are enabled. Actual value depends
+	 * Allows to determine whether alternative tooltips are enabled.
-	 * on settings.
 	 *
+	 * - Bugfix: Tooltips: optional alternative JS implementation with CSS transitions to fix configuration-related outage, thanks to @andreasra feedback.
+	 *
+	 * @since 2.1.1
+	 *
+	 * @reporter @andreasra
+	 * @link https://wordpress.org/support/topic/footnotes-appearing-in-header/page/2/#post-13632566
+	 *
+	 * @since 2.4.0
 	 * @contributor Patrizia Lutz @misfist
 	 * @var bool
 	 *
-	 * @todo Refactor to have defines only here, and use assignments also in class/task.php.
 	 */
 	public static $a_bool_alternative_tooltips_enabled = false;
 
+	/**
+	 * Allows to determine whether AMP compatibility mode is enabled.
+	 *
+	 * - Adding: Tooltips: make display work purely by style rules for AMP compatibility, thanks to @milindmore22 and @westonruter code contributions.
+	 * - Adding: Reference container: get expanding and collapsing to work also in AMP compatibility mode, thanks to @westonruter code contribution.
+	 *
+	 * @since 2.6.0
+	 *
+	 * @contributor @milindmore22
+	 * @link @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785306933
+	 *
+	 * @contributor @westonruter
+	 * @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785419655
+	 * @link https://github.com/markcheret/footnotes/issues/48#issuecomment-799580854
+	 * @link https://github.com/markcheret/footnotes/issues/48#issuecomment-799582394
+	 *
+	 * @var bool
+	 */
+	public static $a_bool_amp_enabled = false;
+
+	/**
+	 * Allows to determine the script mode among jQuery or plain JS.
+	 *
+	 * - Bugfix: Reference container: optional alternative expanding and collapsing without jQuery for use with hard links, thanks to @hopper87it @pkverma99 issue reports.
+	 *
+	 * @since 2.5.6
+	 *
+	 * @reporter @hopper87it
+	 * @link https://wordpress.org/support/topic/footnotes-wp-rocket/
+	 *
+	 * @reporter @pkverma99
+	 * @link https://wordpress.org/support/topic/footnotes-wp-rocket/#post-14076188
+	 *
+	 * @var str   'js'      Plain JavaScript.
+	 *            'jquery'  Use jQuery libraries.
+	 */
+	public static $a_str_script_mode = 'js';
+
 	/**
 	 * Executes the Plugin.
 	 *
@@ -173,10 +226,11 @@ class MCI_Footnotes {
 		 *
 		 * The condition about tooltips was missing, only the not-alternative-tooltips part was present.
 		 */
-		// Set conditions re-used for stylesheet enqueuing.
+		// Set conditions re-used for stylesheet enqueuing and in class/task.php.
+		self::$a_bool_amp_enabled                  = MCI_Footnotes_Convert::to_bool( MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_FOOTNOTES_AMP_COMPATIBILITY_ENABLE ) );
 		self::$a_bool_tooltips_enabled             = MCI_Footnotes_Convert::to_bool( MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_FOOTNOTES_MOUSE_OVER_BOX_ENABLED ) );
 		self::$a_bool_alternative_tooltips_enabled = MCI_Footnotes_Convert::to_bool( MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_FOOTNOTES_MOUSE_OVER_BOX_ALTERNATIVE ) );
-		$l_str_script_mode                         = MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_FOOTNOTES_REFERENCE_CONTAINER_SCRIPT_MODE );
+		self::$a_str_script_mode                   = MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_FOOTNOTES_REFERENCE_CONTAINER_SCRIPT_MODE );
 
 		/**
 		 * Enqueues the jQuery library registered by WordPress.
@@ -193,7 +247,9 @@ class MCI_Footnotes {
 		 * After adding the alternative reference container, jQuery has become optional,
 		 * but still enabled by default.
 		 */
-		if ( 'jquery' === $l_str_script_mode || ( self::$a_bool_tooltips_enabled && ! self::$a_bool_alternative_tooltips_enabled ) ) {
+		if ( ! self::$a_bool_amp_enabled ) {
+
+			if ( 'jquery' === self::$a_str_script_mode || ( self::$a_bool_tooltips_enabled && ! self::$a_bool_alternative_tooltips_enabled ) ) {
 
 				wp_enqueue_script( 'jquery' );
 
@@ -269,6 +325,8 @@ class MCI_Footnotes {
 
 			}
 
+		}
+
 		/**
 		 * Enables enqueuing a new-scheme stylesheet.
 		 *
@@ -313,16 +371,25 @@ class MCI_Footnotes {
 			 */
 			// Set tooltip mode for use in stylesheet name.
 			if ( self::$a_bool_tooltips_enabled ) {
-				if ( self::$a_bool_alternative_tooltips_enabled ) {
+
-					$l_str_tooltip_mode_short = 'al';
+				if ( self::$a_bool_amp_enabled ) {
-					$l_str_tooltip_mode_rest  = 'ternative-tooltips';
+					$l_str_tooltip_mode_short = 'ampt';
+					$l_str_tooltip_mode_long  = 'amp-tooltips';
+
+				} elseif ( self::$a_bool_alternative_tooltips_enabled ) {
+					$l_str_tooltip_mode_short = 'altt';
+					$l_str_tooltip_mode_long  = 'alternative-tooltips';
+
 				} else {
-					$l_str_tooltip_mode_short = 'jq';
+					$l_str_tooltip_mode_short = 'jqtt';
-					$l_str_tooltip_mode_rest  = 'uery-tooltips';
+					$l_str_tooltip_mode_long  = 'jquery-tooltips';
+
 				}
+
 			} else {
-				$l_str_tooltip_mode_short = 'no';
+				$l_str_tooltip_mode_short = 'nott';
-				$l_str_tooltip_mode_rest  = '-tooltips';
+				$l_str_tooltip_mode_long  = 'no-tooltips';
+
 			}
 
 			// Set basic responsive page layout mode for use in stylesheet name.
@@ -345,9 +412,9 @@ class MCI_Footnotes {
 
 			// Enqueue the tailored united minified stylesheet.
 			wp_enqueue_style(
-				'mci-footnotes-' . $l_str_tooltip_mode_short . $l_str_tooltip_mode_rest . '-pagelayout-' . $l_str_page_layout_option,
+				'mci-footnotes-' . $l_str_tooltip_mode_long . '-pagelayout-' . $l_str_page_layout_option,
 				plugins_url(
-					MCI_Footnotes_Config::C_STR_PLUGIN_NAME . '/css/footnotes-' . $l_str_tooltip_mode_short . 'ttbrpl' . $l_str_layout_mode . '.min.css'
+					MCI_Footnotes_Config::C_STR_PLUGIN_NAME . '/css/footnotes-' . $l_str_tooltip_mode_short . 'brpl' . $l_str_layout_mode . '.min.css'
 				),
 				array(),
 				C_STR_PACKAGE_VERSION,
@@ -367,6 +434,7 @@ class MCI_Footnotes {
 			wp_enqueue_style( 'mci-footnotes-common', plugins_url( MCI_Footnotes_Config::C_STR_PLUGIN_NAME . '/css/dev-common.css' ), array(), C_STR_PACKAGE_VERSION );
 			wp_enqueue_style( 'mci-footnotes-tooltips', plugins_url( MCI_Footnotes_Config::C_STR_PLUGIN_NAME . '/css/dev-tooltips.css' ), array(), C_STR_PACKAGE_VERSION );
 			wp_enqueue_style( 'mci-footnotes-alternative', plugins_url( MCI_Footnotes_Config::C_STR_PLUGIN_NAME . '/css/dev-tooltips-alternative.css' ), array(), C_STR_PACKAGE_VERSION );
+			wp_enqueue_style( 'mci-footnotes-amp', plugins_url( MCI_Footnotes_Config::C_STR_PLUGIN_NAME . '/css/dev-amp-tooltips.css' ), array(), C_STR_PACKAGE_VERSION );
 
 			$l_str_page_layout_option = MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_FOOTNOTES_PAGE_LAYOUT_SUPPORT );
 			if ( 'none' !== $l_str_page_layout_option ) {

class/settings.php

@@ -12,7 +12,7 @@
  * @since 2.0.7  BUGFIX: Hooks: Default-disable 'the_post', thanks to @spaceling @markcheret @nyamachi @whichgodsaves @spiralofhope2 @mmallett @andreasra @widecast @ymorin007 @tashi1es bug reports.
  * @since 2.1.3  Bugfix: Hooks: disable the_excerpt hook by default to fix issues, thanks to @nikelaos bug report.
  *
- *
+ * **Revision of the docblocks is in progress.**
  *
  * @since 2.1.3  fix ref container positioning by priority level  2020-11-17T0205+0100
  *
@@ -324,11 +324,19 @@ class MCI_Footnotes_Settings {
 	 * @since 1.5.6
 	 * @var str
 	 *
-	 * #fff7a7 hard-coded 1.2.5..1.5.5
+	 * - Bugfix: Tooltips: Styling: Background color: empty default value to adopt theme background, thanks to 4msc bug report.
-	 * #fff7a7 default 1.5.6..2.0.6
+	 *
-	 * #ffffff default 2.0.7..2.5.10
+	 * @since 2.6.0
+	 *
+	 * @reporter @4msc
+	 * @link https://wordpress.org/support/topic/tooltip-not-showing-on-dark-theme-with-white-text/
+	 *
+	 * 1.2.5..1.5.5  #fff7a7 hard-coded
+	 * 1.5.6..2.0.6  #fff7a7 setting default
+	 * 2.0.7..2.5.10 #ffffff setting default
 	 * The mouse over box shouldn’t feature a colored background.
 	 * By default, due to diverging user preferences. White is neutral.
+	 * Theme default background color is best.
 	 */
 	const C_STR_FOOTNOTES_MOUSE_OVER_BOX_BACKGROUND = 'footnote_inputfield_custom_mouse_over_box_background';
 
@@ -1079,6 +1087,24 @@ class MCI_Footnotes_Settings {
 	 */
 	const C_STR_FOOTNOTES_REFERENCE_CONTAINER_SCRIPT_MODE = 'footnotes_inputfield_reference_container_script_mode';
 
+	/**
+	 * Settings container key to enable AMP compatibility mode.
+	 *
+	 * - Adding: Tooltips: make display work purely by style rules for AMP compatibility, thanks to @milindmore22 and @westonruter code contributions.
+	 * - Adding: Reference container: get expanding and collapsing to work also in AMP compatibility mode, thanks to @westonruter code contribution.
+	 *
+	 * @since 2.6.0
+	 *
+	 * @contributor @milindmore22
+	 * @link @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785306933
+	 *
+	 * @contributor @westonruter
+	 * @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785419655
+	 * @link https://github.com/markcheret/footnotes/issues/48#issuecomment-799580854
+	 * @link https://github.com/markcheret/footnotes/issues/48#issuecomment-799582394
+	 */
+	const C_STR_FOOTNOTES_AMP_COMPATIBILITY_ENABLE = 'footnotes_inputfield_amp_compatibility_enable';
+
 
 	/**
 	 *      SETTINGS STORAGE.
@@ -1123,6 +1149,9 @@ class MCI_Footnotes_Settings {
 		// General settings.
 		'footnotes_storage'             => array(
 
+			// AMP compatibility.
+			self::C_STR_FOOTNOTES_AMP_COMPATIBILITY_ENABLE            => '',
+
 			// Footnote start and end short codes.
 			self::C_STR_FOOTNOTES_SHORT_CODE_START                    => '((',
 			self::C_STR_FOOTNOTES_SHORT_CODE_END                      => '))',
@@ -1243,7 +1272,7 @@ class MCI_Footnotes_Settings {
 			self::C_STR_MOUSE_OVER_BOX_FONT_SIZE_UNIT                 => 'px',
 
 			self::C_STR_FOOTNOTES_MOUSE_OVER_BOX_COLOR                => '',
-			self::C_STR_FOOTNOTES_MOUSE_OVER_BOX_BACKGROUND           => '#ffffff',
+			self::C_STR_FOOTNOTES_MOUSE_OVER_BOX_BACKGROUND           => '',
 			self::C_INT_FOOTNOTES_MOUSE_OVER_BOX_BORDER_WIDTH         => 1,
 			self::C_STR_FOOTNOTES_MOUSE_OVER_BOX_BORDER_COLOR         => '#cccc99',
 			self::C_INT_FOOTNOTES_MOUSE_OVER_BOX_BORDER_RADIUS        => 0,

class/task.php

@@ -80,6 +80,8 @@
  * @since 2.5.5  Bugfix: Process: fix numbering bug impacting footnote #2 with footnote #1 close to start, thanks to @rumperuu bug report, thanks to @lolzim code contribution.
  * @since 2.5.6  Bugfix: Reference container: optional alternative expanding and collapsing without jQuery for use with hard links, thanks to @hopper87it @pkverma99 issue reports.
  * @since 2.5.7  Bugfix: Process: fix footnote duplication by emptying the footnotes list every time the search algorithm is run on the content, thanks to @inoruhana bug report.
+ * @since 2.6.0  Adding: Tooltips: make display work purely by style rules for AMP compatibility, thanks to @milindmore22 and @westonruter code contributions.
+ * @since 2.6.0  Adding: Reference container: get expanding and collapsing to work also in AMP compatibility mode, thanks to @westonruter code contribution.
  */
 
 // If called directly, abort.
@@ -158,36 +160,6 @@ class MCI_Footnotes_Task {
 	 */
 	public static $a_int_reference_container_id = 1;
 
-	/**
-	 * Whether tooltips are enabled. Actual value depends on settings.
-	 *
-	 * - Bugfix: Templates: optimize template load and processing based on settings, thanks to @misfist code contribution.
-	 *
-	 * @since 2.4.0
-	 * @date 2021-01-04T1355+0100
-	 *
-	 * @contributor Patrizia Lutz @misfist
-	 * @link https://wordpress.org/support/topic/template-override-filter/#post-13864301
-	 * @link https://github.com/misfist/footnotes/releases/tag/2.4.0d3 repository
-	 * @link https://github.com/misfist/footnotes/compare/2.4.0%E2%80%A62.4.0d3 diff
-	 *
-	 * @var bool
-	 *
-	 * Template process and script / stylesheet load optimization.
-	 * Streamline process depending on tooltip enabled status.
-	 * Load tooltip inline script only if jQuery tooltips are enabled.
-	 */
-	public static $a_bool_tooltips_enabled = false;
-
-	/**
-	 * Whether alternative tooltips are enabled. Actual value depends on settings.
-	 *
-	 * @since 2.4.0
-	 *
-	 * @var bool
-	 */
-	public static $a_bool_alternative_tooltips_enabled = false;
-
 	/**
 	 * Hard links for AMP compatibility
 	 *
@@ -736,7 +708,7 @@ class MCI_Footnotes_Task {
 		 * @reporter @noobishh
 		 * @link https://wordpress.org/support/topic/borders-25/
 		 *
-		 * TODO: use `wp_add_inline_style()` or something like that instead.
+		 * @todo Use `wp_add_inline_style()` or something like that instead.
 		 */
 		if ( MCI_Footnotes_Convert::to_bool( MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_REFERENCE_CONTAINER_ROW_BORDERS_ENABLE ) ) ) {
 			echo '.footnotes_table, .footnotes_plugin_reference_row {';
@@ -804,8 +776,7 @@ class MCI_Footnotes_Task {
 		self::$a_bool_hard_links_enable = MCI_Footnotes_Convert::to_bool( MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_FOOTNOTES_HARD_LINKS_ENABLE ) );
 
 		// Correct hard links enabled status depending on alternative reference container enabled status.
-		$l_str_script_mode = MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_FOOTNOTES_REFERENCE_CONTAINER_SCRIPT_MODE );
+		if ( 'jquery' !== MCI_Footnotes::$a_str_script_mode ) {
-		if ( 'jquery' !== $l_str_script_mode ) {
 			self::$a_bool_hard_links_enable = true;
 		}
 
@@ -819,10 +790,10 @@ class MCI_Footnotes_Task {
 		/*
 		 * Tooltips.
 		 */
-		self::$a_bool_tooltips_enabled             = MCI_Footnotes_Convert::to_bool( MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_FOOTNOTES_MOUSE_OVER_BOX_ENABLED ) );
+		MCI_Footnotes::$a_bool_tooltips_enabled             = MCI_Footnotes_Convert::to_bool( MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_FOOTNOTES_MOUSE_OVER_BOX_ENABLED ) );
-		self::$a_bool_alternative_tooltips_enabled = MCI_Footnotes_Convert::to_bool( MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_FOOTNOTES_MOUSE_OVER_BOX_ALTERNATIVE ) );
+		MCI_Footnotes::$a_bool_alternative_tooltips_enabled = MCI_Footnotes_Convert::to_bool( MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_FOOTNOTES_MOUSE_OVER_BOX_ALTERNATIVE ) );
 
-		if ( self::$a_bool_tooltips_enabled ) {
+		if ( MCI_Footnotes::$a_bool_tooltips_enabled ) {
 			echo '.footnote_tooltip {';
 
 			/**
@@ -900,13 +871,12 @@ class MCI_Footnotes_Task {
 			 * @since 2.1.4
 			 * @date 2020-12-06T1320+0100
 			 *
-			 *
 			 * - Update: Tooltips: Alternative tooltips: connect to position/timing settings (for themes not supporting jQuery tooltips).
 			 *
 			 * @since 2.2.5
 			 * @date 2020-12-18T1113+0100
 			 */
-			if ( ! self::$a_bool_alternative_tooltips_enabled ) {
+			if ( ! MCI_Footnotes::$a_bool_alternative_tooltips_enabled ) {
 				/*
 				 * jQuery tooltips.
 				 */
@@ -948,7 +918,7 @@ class MCI_Footnotes_Task {
 				echo "}\r\n";
 
 				/**
-				 * Alternative tooltip timing.
+				 * AMP compatible and alternative tooltip timing.
 				 *
 				 * For jQuery tooltip timing @see templates/public/tooltip.html.
 				 */
@@ -1005,7 +975,7 @@ class MCI_Footnotes_Task {
 		 * The script for alternative tooltips is printed formatted, not minified,
 		 * for transparency. It isn’t indented though (the PHP open tag neither).
 		 */
-		if ( self::$a_bool_alternative_tooltips_enabled ) {
+		if ( MCI_Footnotes::$a_bool_alternative_tooltips_enabled ) {
 
 			// Start internal script.
 			?>
@@ -1396,32 +1366,48 @@ class MCI_Footnotes_Task {
 			}
 		}
 
-		// Load referrer templates if footnotes text not hidden.
+		/**
+		 * Load footnote referrer template file.
+		 */
+
+		// On the condition that the footnote text is not hidden.
 		if ( ! $p_bool_hide_footnotes_text ) {
 
-			// Load footnote referrer template file.
+			// Whether AMP compatibility mode is enabled.
-			if ( self::$a_bool_alternative_tooltips_enabled ) {
+			if ( MCI_Footnotes::$a_bool_amp_enabled ) {
-				$l_obj_template = new MCI_Footnotes_Template( MCI_Footnotes_Template::C_STR_PUBLIC, 'footnote-alternative' );
+
+				// Whether first clicking a referrer needs to expand the reference container.
+				if ( MCI_Footnotes_Convert::to_bool( MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_REFERENCE_CONTAINER_COLLAPSE ) ) ) {
+
+					// Load 'templates/public/amp-footnote-expand.html'.
+					$l_obj_template = new MCI_Footnotes_Template( MCI_Footnotes_Template::C_STR_PUBLIC, 'amp-footnote-expand' );
+
 				} else {
-				$l_obj_template = new MCI_Footnotes_Template( MCI_Footnotes_Template::C_STR_PUBLIC, 'footnote' );
+
+					// Load 'templates/public/amp-footnote-expand.html'.
+					$l_obj_template = new MCI_Footnotes_Template( MCI_Footnotes_Template::C_STR_PUBLIC, 'amp-footnote' );
 				}
 
-			/**
+			} elseif ( MCI_Footnotes::$a_bool_alternative_tooltips_enabled ) {
-			 * Call Boolean again for robustness when priority levels don’t match any longer.
+
-			 *
+				// Load 'templates/public/amp-footnote-expand.html'.
-			 * - Bugfix: Tooltips: fix display in Popup Maker popups by correcting a coding error.
+				$l_obj_template = new MCI_Footnotes_Template( MCI_Footnotes_Template::C_STR_PUBLIC, 'footnote-alternative' );
-			 *
+
-			 * @since 2.5.4
+			} else {
-			 * @see self::add_filter('pum_popup_content', array($this, "the_content"), $l_int_the_content_priority)
+
-			 */
+				// Load 'templates/public/amp-footnote-expand.html'.
-			self::$a_bool_tooltips_enabled             = MCI_Footnotes_Convert::to_bool( MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_FOOTNOTES_MOUSE_OVER_BOX_ENABLED ) );
+				$l_obj_template = new MCI_Footnotes_Template( MCI_Footnotes_Template::C_STR_PUBLIC, 'footnote' );
-			self::$a_bool_alternative_tooltips_enabled = MCI_Footnotes_Convert::to_bool( MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_FOOTNOTES_MOUSE_OVER_BOX_ALTERNATIVE ) );
+
+			}
 
 			// Load tooltip inline script if jQuery tooltips are enabled.
-			if ( self::$a_bool_tooltips_enabled && ! self::$a_bool_alternative_tooltips_enabled ) {
+			if ( MCI_Footnotes::$a_bool_tooltips_enabled && ! MCI_Footnotes::$a_bool_alternative_tooltips_enabled ) {
+				
 				$l_obj_template_tooltip = new MCI_Footnotes_Template( MCI_Footnotes_Template::C_STR_PUBLIC, 'tooltip' );
 			}
+			
 		} else {
+			
 			$l_obj_template         = null;
 			$l_obj_template_tooltip = null;
 		}
@@ -1651,7 +1637,7 @@ class MCI_Footnotes_Task {
 				 * This is equivalent to the WordPress default excerpt generation, i.e. without a
 				 * custom excerpt and without a delimiter. But WordPress does word count, usually 55.
 				 */
-				if ( self::$a_bool_tooltips_enabled && $l_bool_enable_excerpt ) {
+				if ( MCI_Footnotes::$a_bool_tooltips_enabled && $l_bool_enable_excerpt ) {
 					$l_str_dummy_text = wp_strip_all_tags( $l_str_footnote_text );
 					if ( is_int( $l_int_max_length ) && strlen( $l_str_dummy_text ) > $l_int_max_length ) {
 						$l_str_excerpt_text  = substr( $l_str_dummy_text, 0, $l_int_max_length );
@@ -1768,7 +1754,7 @@ class MCI_Footnotes_Task {
 				}
 
 				// Determine tooltip content.
-				if ( self::$a_bool_tooltips_enabled ) {
+				if ( MCI_Footnotes::$a_bool_tooltips_enabled ) {
 					$l_str_tooltip_content = $l_bool_has_tooltip_text ? $l_str_tooltip_text : $l_str_excerpt_text;
 				} else {
 					$l_str_tooltip_content = '';
@@ -1780,7 +1766,7 @@ class MCI_Footnotes_Task {
 				 * @since 2.5.6
 				 */
 				$l_str_tooltip_style = '';
-				if ( self::$a_bool_alternative_tooltips_enabled && self::$a_bool_tooltips_enabled ) {
+				if ( MCI_Footnotes::$a_bool_alternative_tooltips_enabled && MCI_Footnotes::$a_bool_tooltips_enabled ) {
 					$l_int_tooltip_length = strlen( wp_strip_all_tags( $l_str_tooltip_content ) );
 					if ( $l_int_tooltip_length < 70 ) {
 						$l_str_tooltip_style  = ' style="width: ';
@@ -1812,7 +1798,7 @@ class MCI_Footnotes_Task {
 				$l_obj_template->reload();
 
 				// If standard tooltips are enabled but alternative are not.
-				if ( self::$a_bool_tooltips_enabled && ! self::$a_bool_alternative_tooltips_enabled ) {
+				if ( MCI_Footnotes::$a_bool_tooltips_enabled && ! MCI_Footnotes::$a_bool_alternative_tooltips_enabled ) {
 
 					$l_int_offset_y          = intval( MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_INT_FOOTNOTES_MOUSE_OVER_BOX_OFFSET_Y ) );
 					$l_int_offset_x          = intval( MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_INT_FOOTNOTES_MOUSE_OVER_BOX_OFFSET_X ) );
@@ -2411,22 +2397,23 @@ class MCI_Footnotes_Task {
 		 */
 		$l_str_reference_container_label = MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_REFERENCE_CONTAINER_NAME );
 
-		/**
+		// Select the reference container template.
-		 * Select the reference container template according to the script mode.
+		// Whether AMP compatibility mode is enabled.
-		 *
+		if ( MCI_Footnotes::$a_bool_amp_enabled ) {
-		 * - Bugfix: Reference container: optional alternative expanding and collapsing without jQuery for use with hard links, thanks to @hopper87it @pkverma99 issue reports.
-		 *
-		 * @since 2.5.6
-		 *
-		 * @reporter @hopper87it
-		 * @link https://wordpress.org/support/topic/footnotes-wp-rocket/
-		 *
-		 * @reporter @pkverma99
-		 * @link https://wordpress.org/support/topic/footnotes-wp-rocket/#post-14076188
-		 */
-		$l_str_script_mode = MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_FOOTNOTES_REFERENCE_CONTAINER_SCRIPT_MODE );
 
-		if ( 'jquery' === $l_str_script_mode ) {
+			// Whether the reference container is collapsed by default.
+			if ( MCI_Footnotes_Convert::to_bool( MCI_Footnotes_Settings::instance()->get( MCI_Footnotes_Settings::C_STR_REFERENCE_CONTAINER_COLLAPSE ) ) ) {
+
+				// Load 'templates/public/amp-reference-container-collapsed.html'.
+				$l_obj_template_container = new MCI_Footnotes_Template( MCI_Footnotes_Template::C_STR_PUBLIC, 'amp-reference-container-collapsed' );
+
+			} else {
+
+				// Load 'templates/public/amp-reference-container.html'.
+				$l_obj_template_container = new MCI_Footnotes_Template( MCI_Footnotes_Template::C_STR_PUBLIC, 'amp-reference-container' );
+			}
+
+		} elseif ( 'jquery' === MCI_Footnotes::$a_str_script_mode ) {
 
 			// Load 'templates/public/reference-container.html'.
 			$l_obj_template_container = new MCI_Footnotes_Template( MCI_Footnotes_Template::C_STR_PUBLIC, 'reference-container' );

css/dev-amp-tooltips.css

@@ -0,0 +1,60 @@
+/*<?php for docblocks
+/**
+ * Additional stylesheet for alternative tooltips.
+ * 
+ * @since 2.5.5
+ * @version 2.6.0
+ * @lastmodified 2021-02-18T2029+0100
+ *
+ * System of unified minified style sheets tailored to the instance.
+ * 
+ * @see full header in dev-common.css.
+ */
+
+/**
+ * AMP compatible tooltips.
+ * 
+ * - Adding: Tooltips: make display work purely by style rules for AMP compatibility, thanks to @milindmore22 and @westonruter code contributions.
+ * 
+ * @since 2.6.0
+ * 
+ * @contributor @milindmore22
+ * @link @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785306933
+ * 
+ * @contributor @westonruter
+ * @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785419655
+ * 
+ */
+
+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;
+}
+
+/**
+ * These default position values may be overridden by internal CSS.
+ */
+
+.footnote_referrer.relative {
+	position: relative;
+}
+
+.footnote_tooltip.position {
+	display: unset;
+	position: absolute;
+	bottom: 24px;
+	left: -50px;
+	width: 400px;
+}

css/dev-common.css

@@ -6,8 +6,8 @@
  * Created-Time: 16:21
  * Since: 1.0
  * 
- * @version 2.5.8
+ * @version 2.6.0
- * @lastmodified 2021-02-28T1320+0100
+ * @lastmodified 2021-03-16T1529+0100
  *
  *     Classes recommended for Custom CSS:
  *     @see templates/dashboard/customize-css-new.html
@@ -37,9 +37,10 @@
  * 
  * The first part of the code contains 4 letters showing whether tooltips
  * are enabled, and if so, which implementation: jQuery or alternative:
- *  nott  ➜ no tooltips           ➜ -
+ *  ampt  ➜ AMP compatible tooltips  ➜ dev-tooltips.css & dev-amp-tooltips.css
  *  jqtt  ➜ jQuery tooltips          ➜ dev-tooltips.css
  *  altt  ➜ alternative tooltips     ➜ dev-tooltips.css & dev-tooltips-alternative.css
+ *  nott  ➜ no tooltips              ➜ -
  * 
  * The second part of the code consists of the 4 letters "brpl", for 
  * Basic Responsive Page Layout, followed by a digit showing if a fix 
@@ -65,6 +66,7 @@
  * @since 2.3.0  offset anchors for optional hard links, thanks to @psychonevro @martinneumannat bug reports
  * @since 2.4.0  validation error warning box
  * @since 2.5.0  validation error warning box more paragraphs
+ * @since 2.5.11 AMP compatible tooltips and reference container
  */
 
 /**
@@ -273,6 +275,14 @@ Classes:
 	box-sizing: border-box;
 }
 
+.collapsed {
+	display: none;
+}
+
+.unfolded {
+	display: inline;
+}
+
 /**
  * Reference container label.
  * 

css/dev-tooltips-alternative.css

@@ -3,15 +3,14 @@
  * Additional stylesheet for alternative tooltips.
  * 
  * @since 2.5.5
- * @version 2.5.5
+ * @version 2.6.0
- * @lastmodified 2021-02-18T2029+0100
+ * @lastmodified 2021-03-16T1531+0100
  *
  * System of unified minified style sheets tailored to the instance.
  * 
  * @see full header in dev-common.css.
  */
 
-
 /**
  * Alternative tooltips
  * 

css/footnotes-jqttbrpl0.min.css

@@ -1 +1 @@
-.footnotes_validation_error{border:4px solid red;padding:20px 40px;margin:20px 0;background:#ff000055;text-align:start}.footnotes_validation_error p:first-child{font-size:20px;font-weight:700;text-align:center}.footnotes_validation_error p:nth-child(2){font-size:16px;font-style:italic}.footnotes_validation_error p:nth-child(3){font-size:14px;font-weight:700}.footnotes_validation_error p:last-child{font-size:12px}.footnote_url_wrap{word-wrap:anywhere;overflow-wrap:anywhere;word-break:break-all}.footnote_item_base,.footnote_referrer_base{position:absolute}.footnote_item_anchor,.footnote_referrer_anchor{position:relative}.footnote_plugin_tooltip_text,.footnote_plugin_tooltip_text:hover,.footnote_referrer,.footnote_referrer:hover,.footnote_referrer:link,.footnote_referrer>a,.footnote_referrer>a:hover,.footnote_referrer>a:link,.main-content .footnote_plugin_tooltip_text,.main-content .footnote_plugin_tooltip_text:hover,.main-content .footnote_referrer,.main-content .footnote_referrer:hover,.main-content .footnote_referrer:link,.main-content .footnote_referrer>a,.main-content .footnote_referrer>a:hover,.main-content .footnote_referrer>a:link{text-decoration:none!important;border-bottom:none!important;box-shadow:none!important}.footnote_plugin_tooltip_text{line-height:0;position:relative!important;cursor:pointer}.footnotes_reference_container{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.footnote_container_prepare{display:block!important;padding-top:24px!important}.footnote_container_prepare>p{line-height:1.3!important;margin-top:1em!important;margin-bottom:.25em!important;padding:0!important;font-weight:400!important;display:block!important;-webkit-margin-before:.83em!important;-webkit-margin-after:.83em!important;-webkit-margin-start:0!important;-webkit-margin-end:0!important;text-align:start!important;vertical-align:middle}.footnote_container_prepare>p>span:first-child,.footnote_container_prepare>p>span:nth-child(3){text-align:start!important;font-size:1.5em!important}.footnote_reference_container_collapse_button{cursor:pointer;padding:0 .5em;font-size:1.3em!important;vertical-align:2px;text-decoration:none!important}h2>.footnote_reference_container_collapse_button,h3>.footnote_reference_container_collapse_button,h4>.footnote_reference_container_collapse_button,h5>.footnote_reference_container_collapse_button,h6>.footnote_reference_container_collapse_button{font-size:inherit!important}.footnote_container_prepare>p>span:last-child a,.footnote_reference_container_collapse_button a{text-decoration:none!important}.footnote-reference-container,.footnotes_table{width:100%;border:none}.footnote_plugin_index,.footnote_plugin_index_combi,.footnote_plugin_symbol,.footnote_plugin_text{border:none!important;text-align:start!important;vertical-align:top!important;padding:5px 6px 10px 0!important}html[dir=rtl] .footnote_plugin_index,html[dir=rtl] .footnote_plugin_index_combi,html[dir=rtl] .footnote_plugin_symbol,html[dir=rtl] .footnote_plugin_text{padding:5px 0 10px 6px!important}.footnote_backlink,.footnote_backlink:link,.footnote_plugin_link,.footnote_plugin_link:link,.main-content .footnote_backlink,.main-content .footnote_backlink:link,.main-content .footnote_plugin_link,.main-content .footnote_plugin_link:link{text-decoration:none!important;border-bottom:none!important}.footnote_backlink,.footnote_plugin_link{white-space:nowrap}.footnote_backlink,.footnote_index,.pointer{cursor:pointer}.footnote_backlink:hover,.footnote_plugin_link:hover,.footnote_plugin_text a:hover{text-decoration:unset;text-decoration:underline}.footnote_plugin_text{width:unset}.footnote_plugin_index,.footnote_plugin_index_combi{max-width:100px;width:2.5em}@media only screen and (max-width:768px){.footnote_plugin_index,.footnote_plugin_index_combi{max-width:80px}}.footnotes_reference_container{page-break-inside:avoid}@media print{.footnote_index_arrow,.footnote_reference_container_collapse_button,.footnote_tooltip{display:none}.footnote_plugin_tooltip_text{color:inherit}.footnote_plugin_index a,.footnote_plugin_index_combi a{color:inherit;text-decoration:none!important}div.post-meta-edit-link-wrapper{display:none}}.footnotes_logo,.footnotes_logo:hover{text-decoration:none;font-weight:400}.footnotes_logo_part1{color:#2bb975}.footnotes_logo_part2{color:#545f5a}.footnote_tooltip{display:none;z-index:2147483647!important;cursor:auto;text-align:start!important;padding:12px;line-height:1.2;font-weight:400;font-style:normal}.footnote_tooltip_continue{font-style:italic;color:green;text-decoration:none!important;cursor:pointer;white-space:nowrap}.footnote_tooltip_continue:hover{color:#00f;text-decoration:underline!important}
+.footnotes_validation_error{border:4px solid red;padding:20px 40px;margin:20px 0;background:#ff000055;text-align:start}.footnotes_validation_error p:first-child{font-size:20px;font-weight:700;text-align:center}.footnotes_validation_error p:nth-child(2){font-size:16px;font-style:italic}.footnotes_validation_error p:nth-child(3){font-size:14px;font-weight:700}.footnotes_validation_error p:last-child{font-size:12px}.footnote_url_wrap{word-wrap:anywhere;overflow-wrap:anywhere;word-break:break-all}.footnote_item_base,.footnote_referrer_base{position:absolute}.footnote_item_anchor,.footnote_referrer_anchor{position:relative}.footnote_plugin_tooltip_text,.footnote_plugin_tooltip_text:hover,.footnote_referrer,.footnote_referrer:hover,.footnote_referrer:link,.footnote_referrer>a,.footnote_referrer>a:hover,.footnote_referrer>a:link,.main-content .footnote_plugin_tooltip_text,.main-content .footnote_plugin_tooltip_text:hover,.main-content .footnote_referrer,.main-content .footnote_referrer:hover,.main-content .footnote_referrer:link,.main-content .footnote_referrer>a,.main-content .footnote_referrer>a:hover,.main-content .footnote_referrer>a:link{text-decoration:none!important;border-bottom:none!important;box-shadow:none!important}.footnote_plugin_tooltip_text{line-height:0;position:relative!important;cursor:pointer}.footnotes_reference_container{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.collapsed{display:none}.unfolded{display:inline}.footnote_container_prepare{display:block!important;padding-top:24px!important}.footnote_container_prepare>p{line-height:1.3!important;margin-top:1em!important;margin-bottom:.25em!important;padding:0!important;font-weight:400!important;display:block!important;-webkit-margin-before:.83em!important;-webkit-margin-after:.83em!important;-webkit-margin-start:0!important;-webkit-margin-end:0!important;text-align:start!important;vertical-align:middle}.footnote_container_prepare>p>span:first-child,.footnote_container_prepare>p>span:nth-child(3){text-align:start!important;font-size:1.5em!important}.footnote_reference_container_collapse_button{cursor:pointer;padding:0 .5em;font-size:1.3em!important;vertical-align:2px;text-decoration:none!important}h2>.footnote_reference_container_collapse_button,h3>.footnote_reference_container_collapse_button,h4>.footnote_reference_container_collapse_button,h5>.footnote_reference_container_collapse_button,h6>.footnote_reference_container_collapse_button{font-size:inherit!important}.footnote_container_prepare>p>span:last-child a,.footnote_reference_container_collapse_button a{text-decoration:none!important}.footnote-reference-container,.footnotes_table{width:100%;border:none}.footnote_plugin_index,.footnote_plugin_index_combi,.footnote_plugin_symbol,.footnote_plugin_text{border:none!important;text-align:start!important;vertical-align:top!important;padding:5px 6px 10px 0!important}html[dir=rtl] .footnote_plugin_index,html[dir=rtl] .footnote_plugin_index_combi,html[dir=rtl] .footnote_plugin_symbol,html[dir=rtl] .footnote_plugin_text{padding:5px 0 10px 6px!important}.footnote_backlink,.footnote_backlink:link,.footnote_plugin_link,.footnote_plugin_link:link,.main-content .footnote_backlink,.main-content .footnote_backlink:link,.main-content .footnote_plugin_link,.main-content .footnote_plugin_link:link{text-decoration:none!important;border-bottom:none!important}.footnote_backlink,.footnote_plugin_link{white-space:nowrap}.footnote_backlink,.footnote_index,.pointer{cursor:pointer}.footnote_backlink:hover,.footnote_plugin_link:hover,.footnote_plugin_text a:hover{text-decoration:unset;text-decoration:underline}.footnote_plugin_text{width:unset}.footnote_plugin_index,.footnote_plugin_index_combi{max-width:100px;width:2.5em}@media only screen and (max-width:768px){.footnote_plugin_index,.footnote_plugin_index_combi{max-width:80px}}.footnotes_reference_container{page-break-inside:avoid}@media print{.footnote_index_arrow,.footnote_reference_container_collapse_button,.footnote_tooltip{display:none}.footnote_plugin_tooltip_text{color:inherit}.footnote_plugin_index a,.footnote_plugin_index_combi a{color:inherit;text-decoration:none!important}div.post-meta-edit-link-wrapper{display:none}}.footnotes_logo,.footnotes_logo:hover{text-decoration:none;font-weight:400}.footnotes_logo_part1{color:#2bb975}.footnotes_logo_part2{color:#545f5a}.footnote_tooltip{display:none;z-index:2147483647!important;cursor:auto;text-align:start!important;padding:12px;line-height:1.2;font-weight:400;font-style:normal}.footnote_tooltip_continue{font-style:italic;color:green;text-decoration:none!important;cursor:pointer;white-space:nowrap}.footnote_tooltip_continue:hover{color:#00f;text-decoration:underline!important}

css/footnotes-nottbrpl0.min.css

@@ -1 +1 @@
-.footnotes_validation_error{border:4px solid red;padding:20px 40px;margin:20px 0;background:#ff000055;text-align:start}.footnotes_validation_error p:first-child{font-size:20px;font-weight:700;text-align:center}.footnotes_validation_error p:nth-child(2){font-size:16px;font-style:italic}.footnotes_validation_error p:nth-child(3){font-size:14px;font-weight:700}.footnotes_validation_error p:last-child{font-size:12px}.footnote_url_wrap{word-wrap:anywhere;overflow-wrap:anywhere;word-break:break-all}.footnote_item_base,.footnote_referrer_base{position:absolute}.footnote_item_anchor,.footnote_referrer_anchor{position:relative}.footnote_plugin_tooltip_text,.footnote_plugin_tooltip_text:hover,.footnote_referrer,.footnote_referrer:hover,.footnote_referrer:link,.footnote_referrer>a,.footnote_referrer>a:hover,.footnote_referrer>a:link,.main-content .footnote_plugin_tooltip_text,.main-content .footnote_plugin_tooltip_text:hover,.main-content .footnote_referrer,.main-content .footnote_referrer:hover,.main-content .footnote_referrer:link,.main-content .footnote_referrer>a,.main-content .footnote_referrer>a:hover,.main-content .footnote_referrer>a:link{text-decoration:none!important;border-bottom:none!important;box-shadow:none!important}.footnote_plugin_tooltip_text{line-height:0;position:relative!important;cursor:pointer}.footnotes_reference_container{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.footnote_container_prepare{display:block!important;padding-top:24px!important}.footnote_container_prepare>p{line-height:1.3!important;margin-top:1em!important;margin-bottom:.25em!important;padding:0!important;font-weight:400!important;display:block!important;-webkit-margin-before:.83em!important;-webkit-margin-after:.83em!important;-webkit-margin-start:0!important;-webkit-margin-end:0!important;text-align:start!important;vertical-align:middle}.footnote_container_prepare>p>span:first-child,.footnote_container_prepare>p>span:nth-child(3){text-align:start!important;font-size:1.5em!important}.footnote_reference_container_collapse_button{cursor:pointer;padding:0 .5em;font-size:1.3em!important;vertical-align:2px;text-decoration:none!important}h2>.footnote_reference_container_collapse_button,h3>.footnote_reference_container_collapse_button,h4>.footnote_reference_container_collapse_button,h5>.footnote_reference_container_collapse_button,h6>.footnote_reference_container_collapse_button{font-size:inherit!important}.footnote_container_prepare>p>span:last-child a,.footnote_reference_container_collapse_button a{text-decoration:none!important}.footnote-reference-container,.footnotes_table{width:100%;border:none}.footnote_plugin_index,.footnote_plugin_index_combi,.footnote_plugin_symbol,.footnote_plugin_text{border:none!important;text-align:start!important;vertical-align:top!important;padding:5px 6px 10px 0!important}html[dir=rtl] .footnote_plugin_index,html[dir=rtl] .footnote_plugin_index_combi,html[dir=rtl] .footnote_plugin_symbol,html[dir=rtl] .footnote_plugin_text{padding:5px 0 10px 6px!important}.footnote_backlink,.footnote_backlink:link,.footnote_plugin_link,.footnote_plugin_link:link,.main-content .footnote_backlink,.main-content .footnote_backlink:link,.main-content .footnote_plugin_link,.main-content .footnote_plugin_link:link{text-decoration:none!important;border-bottom:none!important}.footnote_backlink,.footnote_plugin_link{white-space:nowrap}.footnote_backlink,.footnote_index,.pointer{cursor:pointer}.footnote_backlink:hover,.footnote_plugin_link:hover,.footnote_plugin_text a:hover{text-decoration:unset;text-decoration:underline}.footnote_plugin_text{width:unset}.footnote_plugin_index,.footnote_plugin_index_combi{max-width:100px;width:2.5em}@media only screen and (max-width:768px){.footnote_plugin_index,.footnote_plugin_index_combi{max-width:80px}}.footnotes_reference_container{page-break-inside:avoid}@media print{.footnote_index_arrow,.footnote_reference_container_collapse_button,.footnote_tooltip{display:none}.footnote_plugin_tooltip_text{color:inherit}.footnote_plugin_index a,.footnote_plugin_index_combi a{color:inherit;text-decoration:none!important}div.post-meta-edit-link-wrapper{display:none}}.footnotes_logo,.footnotes_logo:hover{text-decoration:none;font-weight:400}.footnotes_logo_part1{color:#2bb975}.footnotes_logo_part2{color:#545f5a}
+.footnotes_validation_error{border:4px solid red;padding:20px 40px;margin:20px 0;background:#ff000055;text-align:start}.footnotes_validation_error p:first-child{font-size:20px;font-weight:700;text-align:center}.footnotes_validation_error p:nth-child(2){font-size:16px;font-style:italic}.footnotes_validation_error p:nth-child(3){font-size:14px;font-weight:700}.footnotes_validation_error p:last-child{font-size:12px}.footnote_url_wrap{word-wrap:anywhere;overflow-wrap:anywhere;word-break:break-all}.footnote_item_base,.footnote_referrer_base{position:absolute}.footnote_item_anchor,.footnote_referrer_anchor{position:relative}.footnote_plugin_tooltip_text,.footnote_plugin_tooltip_text:hover,.footnote_referrer,.footnote_referrer:hover,.footnote_referrer:link,.footnote_referrer>a,.footnote_referrer>a:hover,.footnote_referrer>a:link,.main-content .footnote_plugin_tooltip_text,.main-content .footnote_plugin_tooltip_text:hover,.main-content .footnote_referrer,.main-content .footnote_referrer:hover,.main-content .footnote_referrer:link,.main-content .footnote_referrer>a,.main-content .footnote_referrer>a:hover,.main-content .footnote_referrer>a:link{text-decoration:none!important;border-bottom:none!important;box-shadow:none!important}.footnote_plugin_tooltip_text{line-height:0;position:relative!important;cursor:pointer}.footnotes_reference_container{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.collapsed{display:none}.unfolded{display:inline}.footnote_container_prepare{display:block!important;padding-top:24px!important}.footnote_container_prepare>p{line-height:1.3!important;margin-top:1em!important;margin-bottom:.25em!important;padding:0!important;font-weight:400!important;display:block!important;-webkit-margin-before:.83em!important;-webkit-margin-after:.83em!important;-webkit-margin-start:0!important;-webkit-margin-end:0!important;text-align:start!important;vertical-align:middle}.footnote_container_prepare>p>span:first-child,.footnote_container_prepare>p>span:nth-child(3){text-align:start!important;font-size:1.5em!important}.footnote_reference_container_collapse_button{cursor:pointer;padding:0 .5em;font-size:1.3em!important;vertical-align:2px;text-decoration:none!important}h2>.footnote_reference_container_collapse_button,h3>.footnote_reference_container_collapse_button,h4>.footnote_reference_container_collapse_button,h5>.footnote_reference_container_collapse_button,h6>.footnote_reference_container_collapse_button{font-size:inherit!important}.footnote_container_prepare>p>span:last-child a,.footnote_reference_container_collapse_button a{text-decoration:none!important}.footnote-reference-container,.footnotes_table{width:100%;border:none}.footnote_plugin_index,.footnote_plugin_index_combi,.footnote_plugin_symbol,.footnote_plugin_text{border:none!important;text-align:start!important;vertical-align:top!important;padding:5px 6px 10px 0!important}html[dir=rtl] .footnote_plugin_index,html[dir=rtl] .footnote_plugin_index_combi,html[dir=rtl] .footnote_plugin_symbol,html[dir=rtl] .footnote_plugin_text{padding:5px 0 10px 6px!important}.footnote_backlink,.footnote_backlink:link,.footnote_plugin_link,.footnote_plugin_link:link,.main-content .footnote_backlink,.main-content .footnote_backlink:link,.main-content .footnote_plugin_link,.main-content .footnote_plugin_link:link{text-decoration:none!important;border-bottom:none!important}.footnote_backlink,.footnote_plugin_link{white-space:nowrap}.footnote_backlink,.footnote_index,.pointer{cursor:pointer}.footnote_backlink:hover,.footnote_plugin_link:hover,.footnote_plugin_text a:hover{text-decoration:unset;text-decoration:underline}.footnote_plugin_text{width:unset}.footnote_plugin_index,.footnote_plugin_index_combi{max-width:100px;width:2.5em}@media only screen and (max-width:768px){.footnote_plugin_index,.footnote_plugin_index_combi{max-width:80px}}.footnotes_reference_container{page-break-inside:avoid}@media print{.footnote_index_arrow,.footnote_reference_container_collapse_button,.footnote_tooltip{display:none}.footnote_plugin_tooltip_text{color:inherit}.footnote_plugin_index a,.footnote_plugin_index_combi a{color:inherit;text-decoration:none!important}div.post-meta-edit-link-wrapper{display:none}}.footnotes_logo,.footnotes_logo:hover{text-decoration:none;font-weight:400}.footnotes_logo_part1{color:#2bb975}.footnotes_logo_part2{color:#545f5a}

css/footnotes-nottbrpl3.min.css

@@ -1 +1 @@
-.footnotes_validation_error{border:4px solid red;padding:20px 40px;margin:20px 0;background:#ff000055;text-align:start}.footnotes_validation_error p:first-child{font-size:20px;font-weight:700;text-align:center}.footnotes_validation_error p:nth-child(2){font-size:16px;font-style:italic}.footnotes_validation_error p:nth-child(3){font-size:14px;font-weight:700}.footnotes_validation_error p:last-child{font-size:12px}.footnote_url_wrap{word-wrap:anywhere;overflow-wrap:anywhere;word-break:break-all}.footnote_item_base,.footnote_referrer_base{position:absolute}.footnote_item_anchor,.footnote_referrer_anchor{position:relative}.footnote_plugin_tooltip_text,.footnote_plugin_tooltip_text:hover,.footnote_referrer,.footnote_referrer:hover,.footnote_referrer:link,.footnote_referrer>a,.footnote_referrer>a:hover,.footnote_referrer>a:link,.main-content .footnote_plugin_tooltip_text,.main-content .footnote_plugin_tooltip_text:hover,.main-content .footnote_referrer,.main-content .footnote_referrer:hover,.main-content .footnote_referrer:link,.main-content .footnote_referrer>a,.main-content .footnote_referrer>a:hover,.main-content .footnote_referrer>a:link{text-decoration:none!important;border-bottom:none!important;box-shadow:none!important}.footnote_plugin_tooltip_text{line-height:0;position:relative!important;cursor:pointer}.footnotes_reference_container{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.footnote_container_prepare{display:block!important;padding-top:24px!important}.footnote_container_prepare>p{line-height:1.3!important;margin-top:1em!important;margin-bottom:.25em!important;padding:0!important;font-weight:400!important;display:block!important;-webkit-margin-before:.83em!important;-webkit-margin-after:.83em!important;-webkit-margin-start:0!important;-webkit-margin-end:0!important;text-align:start!important;vertical-align:middle}.footnote_container_prepare>p>span:first-child,.footnote_container_prepare>p>span:nth-child(3){text-align:start!important;font-size:1.5em!important}.footnote_reference_container_collapse_button{cursor:pointer;padding:0 .5em;font-size:1.3em!important;vertical-align:2px;text-decoration:none!important}h2>.footnote_reference_container_collapse_button,h3>.footnote_reference_container_collapse_button,h4>.footnote_reference_container_collapse_button,h5>.footnote_reference_container_collapse_button,h6>.footnote_reference_container_collapse_button{font-size:inherit!important}.footnote_container_prepare>p>span:last-child a,.footnote_reference_container_collapse_button a{text-decoration:none!important}.footnote-reference-container,.footnotes_table{width:100%;border:none}.footnote_plugin_index,.footnote_plugin_index_combi,.footnote_plugin_symbol,.footnote_plugin_text{border:none!important;text-align:start!important;vertical-align:top!important;padding:5px 6px 10px 0!important}html[dir=rtl] .footnote_plugin_index,html[dir=rtl] .footnote_plugin_index_combi,html[dir=rtl] .footnote_plugin_symbol,html[dir=rtl] .footnote_plugin_text{padding:5px 0 10px 6px!important}.footnote_backlink,.footnote_backlink:link,.footnote_plugin_link,.footnote_plugin_link:link,.main-content .footnote_backlink,.main-content .footnote_backlink:link,.main-content .footnote_plugin_link,.main-content .footnote_plugin_link:link{text-decoration:none!important;border-bottom:none!important}.footnote_backlink,.footnote_plugin_link{white-space:nowrap}.footnote_backlink,.footnote_index,.pointer{cursor:pointer}.footnote_backlink:hover,.footnote_plugin_link:hover,.footnote_plugin_text a:hover{text-decoration:unset;text-decoration:underline}.footnote_plugin_text{width:unset}.footnote_plugin_index,.footnote_plugin_index_combi{max-width:100px;width:2.5em}@media only screen and (max-width:768px){.footnote_plugin_index,.footnote_plugin_index_combi{max-width:80px}}.footnotes_reference_container{page-break-inside:avoid}@media print{.footnote_index_arrow,.footnote_reference_container_collapse_button,.footnote_tooltip{display:none}.footnote_plugin_tooltip_text{color:inherit}.footnote_plugin_index a,.footnote_plugin_index_combi a{color:inherit;text-decoration:none!important}div.post-meta-edit-link-wrapper{display:none}}.footnotes_logo,.footnotes_logo:hover{text-decoration:none;font-weight:400}.footnotes_logo_part1{color:#2bb975}.footnotes_logo_part2{color:#545f5a}.main-content,.site-main,div.hentry,main{margin:0 auto}@media (max-width:575px){.main-content,.site-main,div.hentry,main{padding:0 10px}}@media (min-width:576px){.main-content,.site-main,div.hentry,main{max-width:500px}}@media (min-width:768px){.main-content,.site-main,div.hentry,main{max-width:600px}}@media (min-width:992px){.main-content,.site-main,div.hentry,main{max-width:800px}}@media (min-width:1200px){.main-content,.site-main,div.hentry,main{max-width:960px}}
+.footnotes_validation_error{border:4px solid red;padding:20px 40px;margin:20px 0;background:#ff000055;text-align:start}.footnotes_validation_error p:first-child{font-size:20px;font-weight:700;text-align:center}.footnotes_validation_error p:nth-child(2){font-size:16px;font-style:italic}.footnotes_validation_error p:nth-child(3){font-size:14px;font-weight:700}.footnotes_validation_error p:last-child{font-size:12px}.footnote_url_wrap{word-wrap:anywhere;overflow-wrap:anywhere;word-break:break-all}.footnote_item_base,.footnote_referrer_base{position:absolute}.footnote_item_anchor,.footnote_referrer_anchor{position:relative}.footnote_plugin_tooltip_text,.footnote_plugin_tooltip_text:hover,.footnote_referrer,.footnote_referrer:hover,.footnote_referrer:link,.footnote_referrer>a,.footnote_referrer>a:hover,.footnote_referrer>a:link,.main-content .footnote_plugin_tooltip_text,.main-content .footnote_plugin_tooltip_text:hover,.main-content .footnote_referrer,.main-content .footnote_referrer:hover,.main-content .footnote_referrer:link,.main-content .footnote_referrer>a,.main-content .footnote_referrer>a:hover,.main-content .footnote_referrer>a:link{text-decoration:none!important;border-bottom:none!important;box-shadow:none!important}.footnote_plugin_tooltip_text{line-height:0;position:relative!important;cursor:pointer}.footnotes_reference_container{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.collapsed{display:none}.unfolded{display:inline}.footnote_container_prepare{display:block!important;padding-top:24px!important}.footnote_container_prepare>p{line-height:1.3!important;margin-top:1em!important;margin-bottom:.25em!important;padding:0!important;font-weight:400!important;display:block!important;-webkit-margin-before:.83em!important;-webkit-margin-after:.83em!important;-webkit-margin-start:0!important;-webkit-margin-end:0!important;text-align:start!important;vertical-align:middle}.footnote_container_prepare>p>span:first-child,.footnote_container_prepare>p>span:nth-child(3){text-align:start!important;font-size:1.5em!important}.footnote_reference_container_collapse_button{cursor:pointer;padding:0 .5em;font-size:1.3em!important;vertical-align:2px;text-decoration:none!important}h2>.footnote_reference_container_collapse_button,h3>.footnote_reference_container_collapse_button,h4>.footnote_reference_container_collapse_button,h5>.footnote_reference_container_collapse_button,h6>.footnote_reference_container_collapse_button{font-size:inherit!important}.footnote_container_prepare>p>span:last-child a,.footnote_reference_container_collapse_button a{text-decoration:none!important}.footnote-reference-container,.footnotes_table{width:100%;border:none}.footnote_plugin_index,.footnote_plugin_index_combi,.footnote_plugin_symbol,.footnote_plugin_text{border:none!important;text-align:start!important;vertical-align:top!important;padding:5px 6px 10px 0!important}html[dir=rtl] .footnote_plugin_index,html[dir=rtl] .footnote_plugin_index_combi,html[dir=rtl] .footnote_plugin_symbol,html[dir=rtl] .footnote_plugin_text{padding:5px 0 10px 6px!important}.footnote_backlink,.footnote_backlink:link,.footnote_plugin_link,.footnote_plugin_link:link,.main-content .footnote_backlink,.main-content .footnote_backlink:link,.main-content .footnote_plugin_link,.main-content .footnote_plugin_link:link{text-decoration:none!important;border-bottom:none!important}.footnote_backlink,.footnote_plugin_link{white-space:nowrap}.footnote_backlink,.footnote_index,.pointer{cursor:pointer}.footnote_backlink:hover,.footnote_plugin_link:hover,.footnote_plugin_text a:hover{text-decoration:unset;text-decoration:underline}.footnote_plugin_text{width:unset}.footnote_plugin_index,.footnote_plugin_index_combi{max-width:100px;width:2.5em}@media only screen and (max-width:768px){.footnote_plugin_index,.footnote_plugin_index_combi{max-width:80px}}.footnotes_reference_container{page-break-inside:avoid}@media print{.footnote_index_arrow,.footnote_reference_container_collapse_button,.footnote_tooltip{display:none}.footnote_plugin_tooltip_text{color:inherit}.footnote_plugin_index a,.footnote_plugin_index_combi a{color:inherit;text-decoration:none!important}div.post-meta-edit-link-wrapper{display:none}}.footnotes_logo,.footnotes_logo:hover{text-decoration:none;font-weight:400}.footnotes_logo_part1{color:#2bb975}.footnotes_logo_part2{color:#545f5a}.main-content,.site-main,div.hentry,main{margin:0 auto}@media (max-width:575px){.main-content,.site-main,div.hentry,main{padding:0 10px}}@media (min-width:576px){.main-content,.site-main,div.hentry,main{max-width:500px}}@media (min-width:768px){.main-content,.site-main,div.hentry,main{max-width:600px}}@media (min-width:992px){.main-content,.site-main,div.hentry,main{max-width:800px}}@media (min-width:1200px){.main-content,.site-main,div.hentry,main{max-width:960px}}

footnotes.php

@@ -4,7 +4,7 @@
  * Plugin URI: https://wordpress.org/plugins/footnotes/
  * Description: time to bring footnotes to your website! footnotes are known from offline publishing and everybody takes them for granted when reading a magazine.
  * Author: Mark Cheret
- * Package V.: 2.5.11d4
+ * Package V.: 2.6.0d1
  * Version: 2.5.10
  * CAUTION: THIS V. FIELD IS PARSED FOR UPDATE CONFIGURATION.
  * Author URI: https://cheret.org/footnotes/
@@ -24,9 +24,9 @@
  * @since 2.1.4
  * @since 2.5.3 (Hungarian)
  * @var str
- * @lastmodified 2021-03-15T2055+0100
+ * @lastmodified 2021-03-15T2139+0100
  */
-define( 'C_STR_PACKAGE_VERSION', '2.5.11d4' );
+define( 'C_STR_PACKAGE_VERSION', '2.6.0d1' );
 
 /**
  * Version numbers in WordPress plugin readme.txt and main PHP headers.

js/wysiwyg-editor.js

@@ -69,7 +69,7 @@
 				author : 'Mark Cheret',
 				authorurl : 'https://cheret.org/footnotes/',
 				infourl : 'https://wordpress.org/plugins/footnotes/',
-				version : "2.5.10"
+				version : "2.6.0"
 			};
 		}
 	});

readme.txt

@@ -4,8 +4,8 @@ Tags: footnote, footnotes, bibliography, formatting, notes, Post, posts, referen
 Requires at least: 3.9
 Tested up to: 5.7
 Requires PHP: 5.6
-Package Version: 2.5.11d4
+Package Version: 2.6.0d1
-Version: 2.5.10
+Version: 2.6.0
 Stable Tag: 2.5.10
 CAUTION: THE S. T. FIELD IS PARSED FOR RELEASE CONFIGURATION.
 License: GPLv3 or later
@@ -80,7 +80,10 @@ Visit this swift write-up from a **footnotes** user by the name of **Southwest**
 
 == Changelog ==
 
-= 2.5.11 =
+= 2.6.0 =
+- Adding: Tooltips: make display work purely by style rules for AMP compatibility, thanks to @milindmore22 and @westonruter code contributions.
+- Adding: Reference container: get expanding and collapsing to work also in AMP compatibility mode, thanks to @westonruter code contribution.
+- Bugfix: Tooltips: Styling: Background color: empty default value to adopt theme background, thanks to 4msc bug report.
 - Update: Documentation: Readme.txt: comment line below the 'Stable Tag' field to warn that this field is (unintuitively) parsed for release configuration.
 - Update: Documentation: Readme.txt: informative 'Version' field in sync with 'Version' in 'footnotes.php' for bugfix versions available ahead of the Stable Tag.
 - Update: Documentation: Readme.txt: informative 'Package Version' field in sync with the 'Package V.' field added in the 'footnotes.php' file header.

templates/dashboard/settings-amp.html

@@ -0,0 +1,11 @@
+<table class="settings_amp widefat fixed">
+	<tbody>
+		<tr>
+			<td>[[label-amp]]</td>
+			<td>[[amp]] <span class="footnotes_notice">[[notice-amp]]</span></td>
+		</tr>
+	</tbody>
+</table>
+<div class="footnotes_description">
+	<p>[[description-amp]]</p>
+</div>

templates/public/amp-footnote-expand.html

@@ -0,0 +1,40 @@
+<!--<?php//for docblock, @see MCI_Footnotes_Template::process_template()
+	/**
+	 * Footnote template to enable AMP compatibility mode.
+	 *
+	 * - Adding: Tooltips: make display work purely by style rules for AMP compatibility, thanks to @milindmore22 and @westonruter code contributions.
+	 * - Adding: Reference container: get expanding and collapsing to work also in AMP compatibility mode, thanks to @westonruter code contribution.
+	 *
+	 * @since 2.6.0
+	 *
+	 * @contributor @milindmore22
+	 * @link @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785306933
+	 *
+	 * @contributor @westonruter
+	 * @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785419655
+	 * @link https://github.com/markcheret/footnotes/issues/48#issuecomment-799580854
+	 * @link https://github.com/markcheret/footnotes/issues/48#issuecomment-799582394
+	 * 
+	 * Using the `tap` event.
+	 * @link https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events
+	 * Using the `toggleClass` action.
+	 * @link https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/#*-(all-elements)
+	 */?>
+-->
+<span
+	class="footnote_referrer relative"
+	><[[link-span]]
+		on="tap:footnote_references_container_[[post_id]]_[[container_id]].toggleClass(class=collapsed, force=false),footnotes_container_button_plus_[[post_id]]_[[container_id]].toggleClass(class=collapsed, force=true),footnotes_container_button_minus_[[post_id]]_[[container_id]].toggleClass(class=collapsed, force=false)"
+		[[hard-link]]
+		><[[sup-span]]
+			id="footnote_plugin_tooltip_[[post_id]]_[[container_id]]_[[note_id]]"
+			class="footnote_plugin_tooltip_text"
+			>[[before]][[index]][[after]]</[[sup-span]]
+		></[[link-span]]
+	>[[anchor-element]]<span
+		id="footnote_plugin_tooltip_text_[[post_id]]_[[container_id]]_[[note_id]]"
+		class="footnote_tooltip position"
+		[[style]]
+		>[[text]]</span
+	></span
+>

templates/public/amp-footnote.html

@@ -0,0 +1,34 @@
+<!--<?php//for docblock, @see MCI_Footnotes_Template::process_template()
+	/**
+	 * Footnote template to enable AMP compatibility mode.
+	 *
+	 * - Adding: Tooltips: make display work purely by style rules for AMP compatibility, thanks to @milindmore22 and @westonruter code contributions.
+	 * - Adding: Reference container: get expanding and collapsing to work also in AMP compatibility mode, thanks to @westonruter code contribution.
+	 *
+	 * @since 2.6.0
+	 *
+	 * @contributor @milindmore22
+	 * @link @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785306933
+	 *
+	 * @contributor @westonruter
+	 * @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785419655
+	 * @link https://github.com/markcheret/footnotes/issues/48#issuecomment-799580854
+	 * @link https://github.com/markcheret/footnotes/issues/48#issuecomment-799582394
+	 */?>
+-->
+<span
+	class="footnote_referrer relative"
+	><[[link-span]]
+		[[hard-link]]
+		><[[sup-span]]
+			id="footnote_plugin_tooltip_[[post_id]]_[[container_id]]_[[note_id]]"
+			class="footnote_plugin_tooltip_text"
+			>[[before]][[index]][[after]]</[[sup-span]]
+		></[[link-span]]
+	>[[anchor-element]]<span
+		id="footnote_plugin_tooltip_text_[[post_id]]_[[container_id]]_[[note_id]]"
+		class="footnote_tooltip position"
+		[[style]]
+		>[[text]]</span
+	></span
+>

templates/public/amp-reference-container-collapsed.html

@@ -0,0 +1,62 @@
+<!--<?php//for docblock, @see MCI_Footnotes_Template::process_template()
+	/**
+	 * Reference container template to enable AMP compatibility mode.
+	 *
+	 * - Adding: Tooltips: make display work purely by style rules for AMP compatibility, thanks to @milindmore22 and @westonruter code contributions.
+	 * - Adding: Reference container: get expanding and collapsing to work also in AMP compatibility mode, thanks to @westonruter code contribution.
+	 *
+	 * @since 2.6.0
+	 *
+	 * @contributor @milindmore22
+	 * @link @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785306933
+	 *
+	 * @contributor @westonruter
+	 * @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785419655
+	 * @link https://github.com/markcheret/footnotes/issues/48#issuecomment-799580854
+	 * @link https://github.com/markcheret/footnotes/issues/48#issuecomment-799582394
+	 *
+	 * Using the `tap` event.
+	 * @link https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events
+	 * Using the `toggleClass` action.
+	 * @link https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/#*-(all-elements)
+	 */?>
+-->
+<div
+	class="speaker-mute footnotes_reference_container"
+	>
+	<div
+		class="footnote_container_prepare"
+		><[[element]]
+			><span
+				id="footnotes_container_label_expand_[[post_id]]_[[container_id]]"
+				class="footnote_reference_container_label pointer"
+				on="tap:footnote_references_container_[[post_id]]_[[container_id]].toggleClass(class=collapsed),footnotes_container_button_plus_[[post_id]]_[[container_id]].toggleClass(class=collapsed),footnotes_container_button_minus_[[post_id]]_[[container_id]].toggleClass(class=collapsed)"
+				>[[name]]</span
+			><span
+				id="footnotes_container_button_plus_[[post_id]]_[[container_id]]"
+				class="footnote_reference_container_collapse_button"
+				on="tap:footnote_references_container_[[post_id]]_[[container_id]].toggleClass(class=collapsed),footnotes_container_button_plus_[[post_id]]_[[container_id]].toggleClass(class=collapsed),footnotes_container_button_minus_[[post_id]]_[[container_id]].toggleClass(class=collapsed)"
+			>[+]</span
+			><span
+			></span
+			><span
+				id="footnotes_container_button_minus_[[post_id]]_[[container_id]]"
+				class="footnote_reference_container_collapse_button collapsed"
+				on="tap:footnote_references_container_[[post_id]]_[[container_id]].toggleClass(class=collapsed),footnotes_container_button_plus_[[post_id]]_[[container_id]].toggleClass(class=collapsed),footnotes_container_button_minus_[[post_id]]_[[container_id]].toggleClass(class=collapsed)"
+			>[−]</span
+			></[[element]]
+		></div
+	>
+	<div
+		id="footnote_references_container_[[post_id]]_[[container_id]]"
+		class="collapsed"
+	>
+		<table
+			class="footnotes_table footnote-reference-container"
+		>
+			<tbody>
+				[[content]]
+			</tbody>
+		</table>
+	</div>
+</div>

templates/public/amp-reference-container.html

@@ -0,0 +1,49 @@
+<!--<?php//for docblock, @see MCI_Footnotes_Template::process_template()
+	/**
+	 * Reference container template to enable AMP compatibility mode.
+	 *
+	 * - Adding: Tooltips: make display work purely by style rules for AMP compatibility, thanks to @milindmore22 and @westonruter code contributions.
+	 * - Adding: Reference container: get expanding and collapsing to work also in AMP compatibility mode, thanks to @westonruter code contribution.
+	 *
+	 * @since 2.6.0
+	 *
+	 * @contributor @milindmore22
+	 * @link @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785306933
+	 *
+	 * @contributor @westonruter
+	 * @link https://github.com/ampproject/amp-wp/issues/5913#issuecomment-785419655
+	 * @link https://github.com/markcheret/footnotes/issues/48#issuecomment-799580854
+	 * @link https://github.com/markcheret/footnotes/issues/48#issuecomment-799582394
+	 * 
+	 * Using the `tap` event.
+	 * @link https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events
+	 * Using the `toggleClass` action.
+	 * @link https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/#*-(all-elements)
+	 */?>
+-->
+<div
+	class="speaker-mute footnotes_reference_container"
+	>
+	<div
+		class="footnote_container_prepare"
+		><[[element]]
+			><span
+				id="footnotes_container_label_expand_[[post_id]]_[[container_id]]"
+				class="footnote_reference_container_label pointer"
+				on="tap:footnote_references_container_[[post_id]]_[[container_id]].toggleClass(class=collapsed)"
+				>[[name]]</span
+			></[[element]]
+		></div
+	>
+	<div
+		id="footnote_references_container_[[post_id]]_[[container_id]]"
+	>
+		<table
+			class="footnotes_table footnote-reference-container"
+		>
+			<tbody>
+				[[content]]
+			</tbody>
+		</table>
+	</div>
+</div>