gamv/ds2-core
1
0
Fork 0
Code Issues 10 Releases 9 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
Download Patch File Download Diff File Expand all files Collapse all files

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