Overlays
Floating UI attached to a trigger: modal dialogs, popovers, and inline tooltips. Plain Markdown images can also auto-open in a click-to-zoom dialog when the plugin’s image-dialog option is on.
Dialog
Basic
The text before >>> becomes the trigger button; the text after is the dialog body.
???
Open dialog
>>>
Dialog content with **markdown** support.
???
Dialog content with markdown support.
Light dismiss
???light-dismiss
Open (click outside to close)
>>>
Clicking the overlay dismisses this dialog.
???
Clicking the overlay dismisses this dialog.
Custom width
???width:400px
Open a narrow dialog
>>>
This dialog is 400px wide.
???
This dialog is 400px wide.
Image dialog
Auto-zoom
With the plugin’s image-dialog option enabled, every standalone Markdown image becomes a click-to-zoom <wa-dialog> — no sigils needed. This whole demo runs with it on, so click the image.
Custom dialog width
A CSS width in the image title — "60%", "800px", "90vw" — sizes that image’s dialog. Thumbnails look identical until you open them.
Opt out with nodialog
Add "nodialog" to the title to leave an image as a plain, non-clickable <img>.
Popover
Placement: top
&&&top
Hover me (top)
>>>
Popover shown on the `top` side.
&&&
Popover shown on the top side.
Placement: bottom
&&&bottom
Hover me (bottom)
>>>
Popover shown on the `bottom` side.
&&&
Popover shown on the bottom side.
Placement: left
&&&left
Hover me (left)
>>>
Popover shown on the `left` side.
&&&
Popover shown on the left side.
Placement: right
&&&right
Hover me (right)
>>>
Popover shown on the `right` side.
&&&
Popover shown on the right side.
Link trigger, no arrow
&&&link without-arrow
More info
>>>
Rendered from a link-styled trigger with no arrow.
&&&
Rendered from a link-styled trigger with no arrow.
Inline popover
The inline form <button type='button' id='popover-834eb337' class='ma-popover-trigger' style='background: none; border: none; padding: 0; color: inherit; text-decoration: underline; text-decoration-style: dotted; cursor: pointer; font: inherit;'>trigger</button><wa-popover for='popover-834eb337' placement='top'>content</wa-popover> works inside a paragraph.
Click &&&here >>> This popover appears inline, mid-sentence.&&& to learn more.
Click
Tooltip
Inline
The inline form <span id="tooltip-236eb861" tabindex="0" class="ma-tooltip-anchor" style="text-decoration: underline dotted; cursor: help;">anchor</span><wa-tooltip for="tooltip-236eb861" placement="top">tip</wa-tooltip> underlines the anchor and shows the tip on hover or focus.
Styled with (((CSS >>> Cascading Style Sheets))) on the web.
Styled with CSS
Placement: top
(((top top tip >>> Shown on the top side.)))
tip
Placement: bottom-start
(((bottom-start bottom-start tip >>> Shown on the bottom-start side.)))
tip
Placement: right
(((right right tip >>> Shown on the right side.)))
tip
Multi-line tip
Use \n inside the tip for line breaks.
(((Org number >>> NO: 9 digits\nSE: 10 digits))) varies by country.
Org number
SE: 10 digits