mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 01:26:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: Update tooltips

Browse source
This commit is contained in:
Lucas Larroche 2022-09-11 14:37:31 +07:00
parent 5e1c52661e
commit e33f67e39c
8 changed files with 30 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

33
docs/src/tooltips.html
View file

@ -24,27 +24,36 @@
<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>
<p>Tooltip with <code>data-placement</code></p>
<div class="tooltip-placement">
<div class="top"><button data-tooltip="Top" data-placement="top" aria-label="Top tooltip">Top tooltip</button></div>
<div class="left"><button data-tooltip="Left" data-placement="left" aria-label="Left tooltip">Left tooltip</button></div>
<div class="right"><button data-tooltip="Right" data-placement="right" aria-label="Right tooltip">Right tooltip</button></div>
<div class="bottom"><button data-tooltip="Bottom" data-placement="bottom" aria-label="Bottom tooltip">Bottom tooltip</button></div>
</div>
<footer class="code">
<pre><code>&lt;<b>p</b>&gt;Tooltip on a &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;link&lt;/<b>a</b>&gt;&lt;/<b>p</b>&gt;
&lt;<b>p</b>&gt;Tooltip on &lt;<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;inline element&lt;/<b>em</b>&gt;&lt;/<b>p</b>&gt;
&lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/<b>p</b>&gt;
<em>&lt;-- Placement --&gt;</em>
&lt;<b>div</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Top"</u> <i>data-placement</i>=<u>"top"</u>&gt;Top tooltip&lt;/<b>button</b>&gt;&lt;/<b>div</b>&gt;
&lt;<b>div</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Left"</u> <i>data-placement</i>=<u>"left"</u>&gt;Left tooltip&lt;/<b>button</b>&gt;&lt;/<b>div</b>&gt;
&lt;<b>div</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Right"</u> <i>data-placement</i>=<u>"right"</u>&gt;Right tooltip&lt;/<b>button</b>&gt;&lt;/<b>div</b>&gt;
&lt;<b>div</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Bottom"</u> <i>data-placement</i>=<u>"bottom"</u>&gt;Bottom tooltip&lt;/<b>button</b>&gt;&lt;/<b>div</b>&gt;
</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>&lt;<b>button</b> <i>data-tooltip</i>=<u>"Top"</u> <i>data-placement</i>=<u>"top"</u>&gt;Top&lt;/<b>button</b>&gt;
&lt;<b>button</b> <i>data-tooltip</i>=<u>"Right"</u> <i>data-placement</i>=<u>"right"</u>&gt;Right&lt;/<b>button</b>&gt;
&lt;<b>button</b> <i>data-tooltip</i>=<u>"Bottom"</u> <i>data-placement</i>=<u>"bottom"</u>&gt;Bottom&lt;/<b>button</b>&gt;
&lt;<b>button</b> <i>data-tooltip</i>=<u>"Left"</u> <i>data-placement</i>=<u>"left"</u>&gt;Left&lt;/<b>button</b>&gt;
</code></pre>
</footer>
</article>
</section>
${require('./_footer.html')}