gamv/ds2-core
1
0
Fork 0
Code Issues 10 Releases 9 Activity

Update pattern documentation

Browse Source
This commit is contained in:
A McIlwraith
2024-07-28 15:30:51 -04:00
parent 77a13bbd46
commit 3292729d53
15 changed files with 227 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
public/patterns/core/tooltip/index.html
View File

@@ -11,7 +11,9 @@
<p>Use tooltips to help differentiate between multiple, close, similar options. </p>
<h2>How to use it</h2>
<p class="notification-box info">Currently, there is no easy way to activate a hover without with pure CSS without using a keyboard or mouse. Level4 media queries aim to solve that.</p>
<p>Either form works. Place this inside another element for the tooltip to be 'linked to that element.' A container element may need to be added for a single tag element, such as a input field. </p>
<p>Either form works.
<sticky-note class="blue">"Either form works": What are the two forms.</sticky-note>Place the <code class="language-html inline">tooltip</code> inside another element for the tooltip to be 'linked to that element.' A container element may need to be added for a single tag element, such as a input field.
</p>
<p>Tool tip positions are: </p>
<ul>
<li>top / block-start</li>
@@ -20,11 +22,11 @@
<li>left / inline-start</li>
</ul>
<p><a href="#">Link with a tool tip<span role="tooltip" inert="inert" tip-position="right">Tool tip content</span></a></p>
<div class="tab-group" id="tooltip">
<pre class="language-html" data-tab="html"><a href="#">Link with a tool tip<span role="tooltip" inert="inert" tip-position="right">Tool tip content</span></a></pre>
<pre class="language-pug" data-tab="pug">a(href="#") Link with a tool tip
<tabset id="tooltip">
<pre class="language-html" tab="html"><a href="#">Link with a tool tip<span role="tooltip" inert="inert" tip-position="right">Tool tip content</span></a></pre>
<pre class="language-pug" tab="pug">a(href="#") Link with a tool tip
span(role="tooltip" inert tip-position="right") Tool tip content</pre>
<pre class="language-css" data-tab="css">/* Position Options
<pre class="language-css" tab="css">/* Position Options
- top / block-start
- right / inline-end
- bottom / block-end
@@ -179,7 +181,10 @@
--tooltip-x: calc(-1 * 3px * -1);
}
}</pre>
<pre class="language-css" data-tab="scss">//- DS2 core (c) 2024 Alexander McIlwraith
<div tab="scss">
<pre class="language-sass">@import "[path to]/_tooltip";
@include tooltip;</pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
$tooltip-border-radius: .5rem !default;
@@ -356,6 +361,7 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
}
}</pre>
</div>
</div>
</tabset>
</body>
</html>