trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

asw-v01: archive deferred content (packs, site, lab, legacy examples)

Browse source 
- 2.1: packs/ -> archive/packs/
- 2.2: site/ -> archive/site/
- 2.3: src/lab/ -> archive/lab/
- 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
This commit is contained in:
exe.dev user 2026-06-07 10:39:21 +02:00
parent 416fe2f180
commit e47a9f4401
173 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

54
archive/examples-legacy/components/tooltips.html Normal file
View file

@ -0,0 +1,54 @@
<!doctype html>
<html lang="en">
<head>
<!--#include virtual="/_include/head.html" -->
<title>Tooltips — ASW Examples</title>
<meta name="description" content="data-tooltip — hover and
focus-visible labels, CSS only, no JavaScript">
</head>
<body>
<!--#include virtual="/_include/nav.html" -->
<main>
<header>
<h1>Tooltips</h1>
<p data-text="lead">data-tooltip — hover and focus-visible labels,
CSS only, no JavaScript</p>
</header>
<p>Add <code>data-tooltip</code> to any element. Appears above on hover
or keyboard focus. No JavaScript.</p>
<h2 id="basic">Basic</h2>
<p>The term
<span data-tooltip="A semantic attribute, not a class">data-tooltip</span>
renders above by default. Works on
<abbr data-tooltip="Hypertext Markup Language">HTML</abbr>,
<code data-tooltip="A monospace code sample">code</code>, or plain text
spans.</p>
<h2 id="bottom-placement">Bottom placement</h2>
<p>Use <code>data-tooltip-position="bottom"</code> when the element is
near the top of the page.</p>
<p>This tooltip appears
<span data-tooltip="I'm below the text" data-tooltip-position="bottom">below</span>
the element.</p>
<h2 id="on-interactive-elements">On interactive elements</h2>
<p>Pair <code>data-tooltip</code> with <code>aria-label</code> on
buttons so screen readers get the full description.</p>
<p>
<button data-tooltip="Publish this draft to the live site" aria-label="Publish">Publish →</button>
<button data-tooltip="Permanently remove this item" aria-label="Delete" disabled>Delete</button>
</p>
<h2 id="in-prose">In prose</h2>
<p><code>data-tooltip</code> annotates terms inline without cluttering
the reading flow:</p>
<p>The <abbr data-tooltip="Agentic Semantic Web">ASW</abbr> framework
uses <span data-tooltip="HTML data-* attributes">data attributes</span>
instead of class names. The
<span data-tooltip="Pico CSS — a minimal semantic HTML stylesheet">Pico
layer</span> handles base styling.</p>
</main>
<!--#include virtual="/_include/footer.html" -->
</body>
</html>