A \webwidget is a place in a line of text where the page draws its own HTML. The companion package’s browser side draws one kind for you: a button that sits in the line, its label anything – text TEX has typeset, say. The component InlineButton draws it, and InlineButton.size gives the widget’s size; its look is CSS, custom properties and a class of your own.
DIY: a note behind a button
Here \mypopover{label}{note} puts a button in the text, with the label on it, that opens the note below. The preamble makes it of a \webwidget and its two parts, the label and the note (\webpart), which TEX typesets with the rest and keeps out of the flow.
The Moon’s distance changes over a month .
more
From about 363300km at perigee to 405500km at apogee: its orbit is an ellipse.
The Moon's distance changes over a month \mypopover{more}{From about
363\,300\,km at perigee to 405\,500\,km at apogee: its orbit is an
ellipse.}.
The preamble:
% Accessible formulas: tagging on and luamml loaded, so that LaTeX writes
% every formula's MathML (with classic fonts LaTeX loads luamml only when
% asked). Reflow TeX reads it for screen readers.
\DocumentMetadata{tagging=on}\tagpdfsetup{math/mathml/luamml/load=true}% Preamble for the \mypopover example (content/docs/web-first/inline-buttons.md).
\usepackage{microtype}\usepackage{reflowtex}% \mypopover{label}{note}: a note behind a button in the text. The button is
% a widget of kind popover; its label and the note are its parts, typeset by
% TeX out of the flow (examples/popover.js draws them). In print, a footnote.
\NewDocumentCommand\mypopover{m +m}{%
\ifreflowtex\webwidget{popover}\webpart{label}{#1}\webpart{note}{\footnotesize #2}%
\else\footnote{#2}%
\fi}
The page’s script. The widget is an inline instance of kind popover, and the label and the note are its parts. It draws them with the building blocks the companion package provides, written with Preact.
// \mypopover (latex-preambles/popover.tex): \webwidget{popover} is an inline
// instance of kind popover, with two parts, label and note (\webpart). It is
// a button with its label in it; pressing it opens the note below.
import{html,useState,defineInline,InlineButton,Popover,Typeset}from'reflowtex/companion';defineInline('popover',{size:(instance,env)=>InlineButton.size(env,instance.part('label').naturalWidth()),View:({env})=>{const[button,setButton]=useState(null);// the button, while open
returnhtml`
<${InlineButton} env=${env} pressed=${!!button} onPress=${e=>setButton(button?null:e.currentTarget)}>
<${Typeset} part="label" width="natural" />
</${InlineButton}>
${button&&html`
<${Popover} anchor=${button} onClose=${()=>setButton(null)}>
<${Typeset} part="note" />
</${Popover}>`}`;},});