Abbr
An abbreviation whose expansion shows in a bubble on hover or focus and is read out by screen readers.
Demo
The HTML (HyperText Markup Language) is sent first, the CSS (Cascading Style Sheets) with it, and the script only when a component is reached. Reply ASAP (as soon as possible). Hover or Tab to one.
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/abbr.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/abbr.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/abbr.qwe
view AbbrDemo() = <div.demo-stack> <p.demo-note style="color: var(--ui-fg); font-size: 15px"> The <Abbr title="HyperText Markup Language" id="abbr-demo-html">HTML</Abbr> is sent first, the{" "} <Abbr title="Cascading Style Sheets">CSS</Abbr> with it, and the script only when a component is reached. Reply <Abbr title="as soon as possible" tooltip="native" id="abbr-demo-native">ASAP</Abbr>. Hover or Tab to one. </p> </div>Source
ui/abbr.qwe
// Abbr: an abbreviation with what it stands for, shown in a bubble while it is// hovered or focused, and read out by screen readers. A real <abbr>.//// The <Abbr title="HyperText Markup Language">HTML</Abbr> is sent first.// <Abbr title="as soon as possible" tooltip="native">ASAP</Abbr>//// children: the short form. title: what it stands for. tooltip: "bubble" (default:// shown at once, above the word, on hover and keyboard focus) or "native" (the// browser's own, from the title attribute, after a moment). Either way screen readers// get the expansion after the short form. id: the element's id.import ui/theme.qwe use ui_clslet abbr_css = css`.ui-abbr { position: relative; text-decoration: underline dotted; text-decoration-color: var(--ui-muted); text-underline-offset: 2px; cursor: help; border-radius: 3px; }.ui-abbr:focus-visible { outline: none; box-shadow: var(--ui-focus); }.ui-abbr-bubble::after { content: attr(data-ui-abbr); position: absolute; z-index: 50; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); display: none; width: max-content; max-width: min(240px, 70vw); padding: 5px 9px; border-radius: var(--ui-radius-sm); background: var(--ui-fg); color: var(--ui-bg); box-shadow: var(--ui-shadow); font: 500 12px/1.4 var(--ui-font); text-align: center; white-space: normal; text-decoration: none; }.ui-abbr-bubble:hover::after, .ui-abbr-bubble:focus::after { display: block; }@media (hover: none) { .ui-abbr-bubble:hover:not(:focus)::after { display: none; } }`view Abbr(title: str, tooltip: str = "bubble", id: str? = null, class: str? = null, children) { style global abbr_css let bubble = tooltip != "native" <abbr class={ui_cls(["ui-abbr", bubble && "ui-abbr-bubble", class])} id={id} title={bubble ? null : title} data-ui-abbr={bubble ? title : null} tabindex={bubble ? "0" : null}> {children}<span.ui-sr> ({title})</span> </abbr>}Related
BlockquoteA quotation with the person and the source in a figure, as a bar, with a quote mark, or plain.6 views · 6 downloadsBulletListAn unordered list with dot, tick, arrow, star, dash or any glyph bullets, in a tone and a spacing.6 views · 7 downloadsCaptionSmall muted text under a figure, a table or a field, as the right element for each.5 views · 7 downloadsDropCapA paragraph whose first letter is set large and dropped into the first two, three or four lines.5 views · 6 downloadsEyebrowA small uppercase label above a heading, in a tone, with an optional dot.6 views · 8 downloadsFootnoteA numbered footnote mark in the text and the list of notes at the end, each linking to the other.6 views · 6 downloads
Thread
Thread 0 posts
On Abbr: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.