HTML popover

This forum is for all Flare related Tips and Tricks.
Have a tip or trick you use while working in Flare? Share it here.
Post Reply
AlexFox
Sr. Propeller Head
Posts: 232
Joined: Thu Oct 19, 2017 1:56 am

HTML popover

Post by 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
Jr. Propeller Head
Posts: 8
Joined: Wed Apr 28, 2021 10:49 pm

Re: HTML popover

Post by 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!
Post Reply