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

19
docs/css/pico.docs.css
View file

@ -505,23 +505,4 @@ body > nav ul:first-of-type li:nth-of-type(2) {
}
}
/**
* Docs: Tooltips
*/
.tooltip-placement {
display: grid;
grid-template-columns: 100px 1fr 100px;
}
.tooltip-placement .top, .tooltip-placement .bottom {
grid-column-start: 2;
grid-column-end: 3;
}
.tooltip-placement .left {
grid-column-start: 1;
grid-column-end: 2;
}
.tooltip-placement .right {
grid-column-start: 3;
}
/*# sourceMappingURL=pico.docs.css.map */

2
docs/css/pico.docs.css.map
View file

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.min.css.map
View file

File diff suppressed because one or more lines are too long

3
docs/scss/pico.docs.scss
View file

@ -22,6 +22,3 @@
@import "components/modal";
@import "components/nav";
@import "components/theme-switcher";
// Utilities
@import "utilities/tooltips";

19
docs/scss/utilities/_tooltips.scss
View file

@ -1,19 +0,0 @@
/**
* Docs: Tooltips
*/
.tooltip-placement {
display: grid;
grid-template-columns: 100px 1fr 100px;
.top, .bottom{
grid-column-start: 2;
grid-column-end: 3;
}
.left{
grid-column-start: 1;
grid-column-end: 2;
}
.right{
grid-column-start: 3;
}
}

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')}

11
docs/tooltips.html
View file

File diff suppressed because one or more lines are too long