From 85cef4b7c8995c4a11eec1157b68742c0fcfc339 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sun, 17 Dec 2017 16:45:43 +0200 Subject: [PATCH] Documented tooltips --- docs/doc-fragments/docFragments.js | 4 +++- docs/doc-fragments/modalDialogs.js | 0 docs/doc-fragments/toasts.js | 2 +- docs/doc-fragments/tooltips.js | 28 ++++++++++++++++++++++++++++ docs/v3/DEVLOG.md | 4 ++++ docs/v3/docs.html | 14 ++++++++++++-- 6 files changed, 48 insertions(+), 4 deletions(-) create mode 100644 docs/doc-fragments/modalDialogs.js create mode 100644 docs/doc-fragments/tooltips.js diff --git a/docs/doc-fragments/docFragments.js b/docs/doc-fragments/docFragments.js index acdf7e8..d267bf0 100644 --- a/docs/doc-fragments/docFragments.js +++ b/docs/doc-fragments/docFragments.js @@ -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 ] diff --git a/docs/doc-fragments/modalDialogs.js b/docs/doc-fragments/modalDialogs.js new file mode 100644 index 0000000..e69de29 diff --git a/docs/doc-fragments/toasts.js b/docs/doc-fragments/toasts.js index f11da09..7573bf5 100644 --- a/docs/doc-fragments/toasts.js +++ b/docs/doc-fragments/toasts.js @@ -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: `

mini.css provides you with toast messages (.toast), allowing you to display native-looking notifications on mobile devices.

`, example: `
This is a toast message!
`, samples: [`
<span class="toast">This is a toast message!</span>
`], diff --git a/docs/doc-fragments/tooltips.js b/docs/doc-fragments/tooltips.js new file mode 100644 index 0000000..062a9b7 --- /dev/null +++ b/docs/doc-fragments/tooltips.js @@ -0,0 +1,28 @@ +module.exports = { + id: 'tooltips', + title: 'Tooltips', + keywords: [`tooltip`, `aria-label`, `contextual`, `bottom`, `span`], + description: `

You can utilize the aria-label property to create accessible tooltips (.tooltip), allowing you to display explanatory text for different elements.

`, + example: `

Hover over this text to see a tooltip!

`, + samples: [`
<span class="tooltip" aria-label="Tooltip text">Hover over text to see tooltip</span>
`], + notes: [ + `Tooltips depend on the aria-label property, so they are fully accessible on screen readers.` + ], + customization: [ + `Text color for tooltips can be changed by changing the value of the --tooltip-fore-color variable.`, + `Background color for tooltips can be changed by changing the value of the --tooltip-back-color variable.`, + `Universal margin for elements can be changed globally by changing the value of the --universal-margin 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 --universal-padding variable.`, + `Universal border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.` + ], + modifiers: [ + { + title : 'Position variant', + description: '

You can make tooltips display below the related text, by adding the appropriate class (.bottom).

', + example: `

Hover over this text to see a tooltip!

`, + samples: [`
<span class="tooltip bottom" aria-label="Tooltip text">Hover over text to see tooltip</span>
`] + } + ], + dos: [], + donts: [] +} diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index b837dfb..e6608ad 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -230,3 +230,7 @@ - Fixed a broken link in `index.html`. - Added the appropriate script for generating Codepen links dynamically. Oh, yeah! - Documented `.toast` messages. + +## 20171217 + +- Documented `.tooltip`. diff --git a/docs/v3/docs.html b/docs/v3/docs.html index ef378cb..e0ce4f0 100644 --- a/docs/v3/docs.html +++ b/docs/v3/docs.html @@ -26,7 +26,7 @@
- +

Getting started

You can get started using mini.css in one of many ways. It is published on npm and yarn, so you can easily download it, using your preferred package manager:

@@ -629,11 +629,21 @@

Notes

  • Toast elements do not have any pre-defined behavior, but you can use Javascript to add functionality to them.

Customization

  • Text color for toast messages can be changed by changing the value of the --toast-fore-color variable.
  • Background color for toast messages can be changed by changing the value of the --toast-back-color variable.
  • Universal margin for elements can be changed globally by changing the value of the --universal-margin 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 --universal-padding variable.
  • Universal border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.
+

+

Tooltips

+

You can utilize the aria-label property to create accessible tooltips (.tooltip), allowing you to display explanatory text for different elements.

+

Example

Hover over this text to see a tooltip!

+

Sample code

<span class="tooltip" aria-label="Tooltip text">Hover over text to see tooltip</span>
+

Modifiers

+

Position variant

You can make tooltips display below the related text, by adding the appropriate class (.bottom).

Example

Hover over this text to see a tooltip!

Sample code
<span class="tooltip bottom" aria-label="Tooltip text">Hover over text to see tooltip</span>
+ +

Notes

  • Tooltips depend on the aria-label property, so they are fully accessible on screen readers.
+

Customization

  • Text color for tooltips can be changed by changing the value of the --tooltip-fore-color variable.
  • Background color for tooltips can be changed by changing the value of the --tooltip-back-color variable.
  • Universal margin for elements can be changed globally by changing the value of the --universal-margin 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 --universal-padding variable.
  • Universal border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.