mirror of
https://github.com/picocss/pico.git
synced 2025-04-21 17:16:14 -04:00
88 lines
3.3 KiB
HTML
88 lines
3.3 KiB
HTML
<!DOCTYPE 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>
|
|
|
|
<p>
|
|
<code><i>data-placement</i></code> with the values
|
|
<code><u>top</u></code
|
|
>, <code><u>right</u></code
|
|
>, <code><u>bottom</u></code> or <code><u>left</u></code> is used to
|
|
control the position of the tooltip.
|
|
</p>
|
|
|
|
<article aria-label="Tooltips examples">
|
|
<div class="grid">
|
|
<div class="top">
|
|
<button data-tooltip="Top" data-placement="top">Top</button>
|
|
</div>
|
|
<div class="right">
|
|
<button data-tooltip="Right" data-placement="right">
|
|
Right
|
|
</button>
|
|
</div>
|
|
<div class="bottom">
|
|
<button data-tooltip="Bottom" data-placement="bottom">
|
|
Bottom
|
|
</button>
|
|
</div>
|
|
<div class="left">
|
|
<button data-tooltip="Left" data-placement="left">Left</button>
|
|
</div>
|
|
</div>
|
|
<footer class="code">
|
|
<pre><code><<b>button</b> <i>data-tooltip</i>=<u>"Top"</u> <i>data-placement</i>=<u>"top"</u>>Top</<b>button</b>>
|
|
<<b>button</b> <i>data-tooltip</i>=<u>"Right"</u> <i>data-placement</i>=<u>"right"</u>>Right</<b>button</b>>
|
|
<<b>button</b> <i>data-tooltip</i>=<u>"Bottom"</u> <i>data-placement</i>=<u>"bottom"</u>>Bottom</<b>button</b>>
|
|
<<b>button</b> <i>data-tooltip</i>=<u>"Left"</u> <i>data-placement</i>=<u>"left"</u>>Left</<b>button</b>>
|
|
</code></pre>
|
|
</footer>
|
|
</article>
|
|
</section>
|
|
|
|
${require('./_footer.html')}
|
|
</div>
|
|
</main>
|
|
<script src="js/commons.min.js"></script>
|
|
</body>
|
|
</html>
|