mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-25 14:51:06 +02:00
Code Issues Releases Wiki Activity

Documented tooltips

Browse Source
This commit is contained in:
Angelos Chalaris
2017-12-17 16:45:43 +02:00
parent 13398e700b
commit 85cef4b7c8
6 changed files with 48 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/doc-fragments/docFragments.js
View File

@@ -16,6 +16,8 @@ var footer = require('./footer');
var drawer = require('./drawer');
var textHighlighting = require('./textHighlighting');
var toasts = require('./toasts');
var tooltips = require('./tooltips');
var modalDialogs = require('./modalDialogs');
module.exports = [
gettingStarted,
@@ -23,5 +25,5 @@ module.exports = [
grid, cards, cardSections,
formsAndInput, buttons, inputGrouping,
header, navigationBar, footer, drawer,
textHighlighting, toasts
textHighlighting, toasts, tooltips,// modalDialogs
]

0
docs/doc-fragments/modalDialogs.js Normal file
View File

2
docs/doc-fragments/toasts.js
View File

@@ -1,7 +1,7 @@
module.exports = {
id: 'toasts',
title: 'Toasts',
keywords: [`span`, `highlight`, `text highlighting`, `tag`, `primary`, `secondary`, `tertiary`, `inline-block`],
keywords: [`span`, `toast`, `mobile`, `contextual`, `message`],
description: `<p><strong>mini.css</strong> provides you with toast messages (<code>.toast</code>), allowing you to display native-looking notifications on mobile devices.</p>`,
example: `<div class="container" style="height: 8rem; position: relative;"><span class="toast doc" style="position: absolute;">This is a toast message!</span></div>`,
samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;toast&quot;</span><span class="highlight-a">&gt;</span>This is a toast message!<span class="highlight-a">&lt;/span&gt;</span></span></pre>`],

28
docs/doc-fragments/tooltips.js Normal file
View File

@@ -0,0 +1,28 @@
module.exports = {
id: 'tooltips',
title: 'Tooltips',
keywords: [`tooltip`, `aria-label`, `contextual`, `bottom`, `span`],
description: `<p>You can utilize the <code>aria-label</code> property to create accessible tooltips (<code>.tooltip</code>), allowing you to display explanatory text for different elements.</p>`,
example: `<p class="tooltip" aria-label="This is a tooltip">Hover over this text to see a tooltip!</p>`,
samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;tooltip&quot;</span> <span class="highlight-b">aria-label</span>=<span class="highlight-c">&quot;Tooltip text&quot;</span><span class="highlight-a">&gt;</span>Hover over text to see tooltip<span class="highlight-a">&lt;/span&gt;</span></span></pre>`],
notes: [
`Tooltips depend on the <code>aria-label</code> property, so they are fully accessible on screen readers.`
],
customization: [
`Text color for tooltips can be changed by changing the value of the <code>--tooltip-fore-color</code> variable.`,
`Background color for tooltips can be changed by changing the value of the <code>--tooltip-back-color</code> variable.`,
`Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
`Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.`,
`Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`
],
modifiers: [
{
title : 'Position variant',
description: '<p>You can make tooltips display below the related text, by adding the appropriate class (<code>.bottom</code>).</p>',
example: `<p class="tooltip bottom" aria-label="This is a bottom tooltip">Hover over this text to see a tooltip!</p>`,
samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;tooltip bottom&quot;</span> <span class="highlight-b">aria-label</span>=<span class="highlight-c">&quot;Tooltip text&quot;</span><span class="highlight-a">&gt;</span>Hover over text to see tooltip<span class="highlight-a">&lt;/span&gt;</span></span></pre>`]
}
],
dos: [],
donts: []
}