HTML popover

[AlexFox]

popover is a new Global Attribute in the HTML spec and it's AWESOME.

You can show/hide practically any element or group of elements with a native button and setting popover=auto will exactly emulate a Flare image popup that can be dismissed by selecting the bounds outside the element.

This has a multitude of uses, but for me personally, it has enabled proper image popups in clean XHTML output.

MDN Docs

Code example:
Line 1: Image shown normally
Line 2: Simple HTML button targeting the ID of the popover element
Line 3: The same image which will be shown in its native size when the button is clicked

Code: Select all

	<img src="../../../Resources/Images/Example-Image.png" alt="Some alt text" /> 
	<button popovertarget="image1">Click to Expand</button>
	<img popover="auto" id="image1" src="../../../Resources/Images/Example-Image.png" alt="Some alt text" /> 

[KatherineMunro]

Popover could be a good method in eLearning to reveal content in bite-size chunks. Adds another method of introducing interactivity. Thanks for sharing!