@picocss/pico
Version:
Minimal CSS Framework for semantic HTML
44 lines (36 loc) • 1.6 kB
HTML
<html lang="en">
<head>
${require('./_head.html')
title="Tooltips"
description="Enable tooltips everywhere in pure HTML, without JavaScript."
canonical="tooltips.html"
}
</head>
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="tooltips-link"}
<div role="document">
<section id="tooltips">
<hgroup>
<h1>Tooltips</h1>
<h2>Enable tooltips everywhere in pure HTML, without JavaScript.</h2>
</hgroup>
<article aria-label="Tooltips examples">
<p>Tooltip on a <a href="#" onclick="event.preventDefault()" data-tooltip="Tooltip">link</a></p>
<p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
<p><button data-tooltip="Tooltip" aria-label="Example button">Tooltip on a button</button></p>
<footer class="code">
<pre><code><<b>p</b>>Tooltip on a <<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>>link</<b>a</b>></<b>p</b>>
<<b>p</b>>Tooltip on <<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>inline element</<b>em</b>></<b>p</b>>
<<b>p</b>><<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>Tooltip on a button</<b>button</b>></<b>p</b>></code></pre>
</footer>
</article>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
</body>
</html>