feat: legacy import — packs, examples, lab, themes, docs, lineage
Import from agentic-semantic-web/ into restructured repo: - 7 packs (apache, caddy, flask, hugo, nginx, pandoc, python) - shared error pages (403-503) - 17 lab experiments (boilerplate, charts, misc) - 31 example pages (charts, components, content, layout, vault) - 2 themes (garden, trentuna stub) - 4 docs (llms.txt, vocabulary, philosophy, agent-directive) - lineage.md (Pico/Open Props/Charts.css history) - Hugo mounts for lab/ and examples/ All agentic.css references updated to asw.css. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
e9895cf90d
commit
86464f3e21
100 changed files with 14700 additions and 4 deletions
54
examples/components/tooltips.html
Normal file
54
examples/components/tooltips.html
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue