gamv/ds2-core
1
0
Fork 0
Code Issues 8 Releases 7 Activity

Update tooltip, mark complete

Browse Source
This commit is contained in:
A McIlwraith 2024-07-16 03:44:20 -04:00
parent ce98e0c488
commit c0ea225d03
8 changed files with 40 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/index.html
View File

@ -38,8 +38,9 @@
<li><a href="./?p=status">Status</a></li>
</ul>
</nav>
<p class="deprecated-switch"><span></span><span id="deprecated" role="switch"></span>
<label for="deprecated">Show deprecated patterns</label>
<p class="info-switches"><span></span><span id="deprecated" role="switch"></span>
<label for="deprecated">Show deprecated patterns</label><span></span><span id="breakpoints" role="switch"></span>
<label for="breakpoints">Show breakpoint information</label>
</p>
<main id="main">
<h1>DS2 core</h1>
@ -63,9 +64,9 @@
<h1 class="status-complete"><span>Switch
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article>
<article id="components-tooltip" data-name="tooltip" data-status="in-progress" data-template="pug" data-core="true" data-path="components/tooltip">
<h1 class="status-in-progress"><span>Tooltip
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
<article id="components-tooltip" data-name="tooltip" data-status="complete" data-template="pug" data-core="true" data-path="components/tooltip">
<h1 class="status-complete"><span>Tooltip
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article>
<article id="layouts" data-name="layouts" data-status="complete" data-template="none" data-core="true" data-path="layouts">
<h1 class="status-complete"><span>Layouts

16
public/patterns/core/status/index.html
View File

@ -38,7 +38,7 @@
</tr>
<tr>
<td><a href="./?p=components/tooltip"> Tooltip</a></td>
<td><span class="status-in-progress">In progress</span></td>
<td><span class="status-complete">Complete</span></td>
</tr>
</tr>
<tr>
@ -77,7 +77,7 @@
<td colspan="2"><span class="status-not-started">Not started (0)</span></td>
</tr>
<tr>
<td colspan="2"><span class="status-in-progress">In progress (4)</span></td>
<td colspan="2"><span class="status-in-progress">In progress (3)</span></td>
</tr>
<tr>
<td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td>
@ -92,11 +92,7 @@
<td>Layouts</td>
</tr>
<tr>
<td> <a href="./?p=components/tooltip">Tooltip</a></td>
<td>Components</td>
</tr>
<tr>
<td colspan="2"><span class="status-complete">Complete (6)</span></td>
<td colspan="2"><span class="status-complete">Complete (7)</span></td>
</tr>
<tr>
<td> <a href="./?p=colours">Colours</a></td>
@ -122,6 +118,10 @@
<td> <a href="./?p=components/switch">Switch</a></td>
<td>Components</td>
</tr>
<tr>
<td> <a href="./?p=components/tooltip">Tooltip</a></td>
<td>Components</td>
</tr>
<tr>
<td colspan="2"><span class="status-deprecated">Deprecated (1)</span></td>
</tr>
@ -187,7 +187,7 @@
</tr>
<tr>
<td> <a href="./?p=components/tooltip">Tooltip</a></td>
<td><span><span class="status-in-progress">In Progress</span></span></td>
<td><span><span class="status-complete">Complete</span></span></td>
<td>Components</td>
</tr>
</tbody>

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

@ -5,9 +5,13 @@
</head>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>
<p>Tooltips provide brief information messaging through a mouse or keyboard hover. </p>
<h2>When to use it</h2>
<p>Use tool tips to provide additional information. Don't use tooltips for that is required to complete an interaction as the information disappears when it loses the hover state. </p>
<p>Use tooltips to help differentiate between multiple, close, similar options. </p>
<h2>How to use it</h2>
<p>Either form works. Place this inside another element for the tooltip to be "linked to that element."</p>
<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>Tool tip positions are: </p>
<ul>
<li>top / block-start</li>
@ -15,15 +19,11 @@
<li>bottom / block-end</li>
<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
<div role="tooltip" inert="inert" tip-position="bottom">Tool tip content</div></a><a href="#">Link with a tool tip
<tool-tip role="tooltip" inert="inert" tip-position="bottom">Tool tip content</tool-tip></a></pre>
<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
div(role="tooltip" inert tip-position="bottom") Tool tip content
a(href="#") Link with a tool tip
tool-tip(role="tooltip" inert tip-position="bottom") Tool tip content</pre>
span(role="tooltip" inert tip-position="right") Tool tip content</pre>
<pre class="language-css" data-tab="css">/* Position Options
- top / block-start
- right / inline-end

2
src/pg/_config.pug
View File

@ -32,7 +32,7 @@
},
{
name: "tooltip",
status: "in-progress",
status: "complete",
core: true,
},
]

5
src/pg/index.pug
View File

@ -16,7 +16,10 @@ block header
li(class= navClass)
a(href="./?p=" + first.name.toPath() )= first.name.toContent().toSentenceCase()
p.deprecated-switch
p.info-switches
span
span#deprecated(role="switch")
label(for="deprecated") Show deprecated patterns
span
span#breakpoints(role="switch")
label(for="breakpoints") Show breakpoint information

5
src/pg/patterns/core/tooltip/_tooltip.pp
View File

@ -1,5 +1,2 @@
a(href="#") Link with a tool tip
div(role="tooltip" inert tip-position="bottom") Tool tip content
a(href="#") Link with a tool tip
tool-tip(role="tooltip" inert tip-position="bottom") Tool tip content
span(role="tooltip" inert tip-position="right") Tool tip content

5
src/pg/patterns/core/tooltip/_tooltip.pug
View File

@ -1,5 +1,2 @@
a(href="#") Link with a tool tip
div(role="tooltip" inert tip-position="bottom") Tool tip content
a(href="#") Link with a tool tip
tool-tip(role="tooltip" inert tip-position="bottom") Tool tip content
span(role="tooltip" inert tip-position="right") Tool tip content

12
src/pg/patterns/core/tooltip/index.pug
View File

@ -5,12 +5,17 @@ extends ../../../core/_master-pattern
block content
+h(0)
p Tooltips provide brief information messaging through a mouse or keyboard hover.
+h(1)
p Use tool tips to provide additional information. Don't use tooltips for that is required to complete an interaction as the information disappears when it loses the hover state.
p Use tooltips to help differentiate between multiple, close, similar options.
+h(2)
p Either form works. Place this inside another element for the tooltip to be "linked to that element."
p.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 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 Tool tip positions are:
ul
@ -19,6 +24,9 @@ block content
li bottom / block-end
li left / inline-start
p
include _tooltip.pug
div#tooltip.tab-group
pre.language-html(data-tab="html")