From cb17d84df8a8567df8771285ac58c5a7a7c731cc Mon Sep 17 00:00:00 2001 From: Thomas Cazade Date: Tue, 31 Oct 2017 00:00:40 +0100 Subject: [PATCH 1/2] Added popovers --- index.html | 41 ++++++++++++++++++++++++ src/popovers.less | 80 +++++++++++++++++++++++++++++++++++++++++++++++ src/styles.less | 3 +- 3 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 src/popovers.less diff --git a/index.html b/index.html index 456c282..0a3245d 100644 --- a/index.html +++ b/index.html @@ -541,6 +541,47 @@ function add(x, y) { <table class="table-alternating"> +
+

Popovers

+

Basic usage

+

You can add popovers, also called tooltips, on your elements. popover attribute is the popover text content, popover-position attribute can be: top, left, right, bottom.

+ +
+
+

Popover left position

+
+
+

Popover top position

+
+
+

Popover bottom position

+
+
+

Popover right position

+
+
+ +
+ 
+<p popover="Popover on left" popover-position="left">Popover left position</p>
+<p popover="Popover on top" popover-position="top">Popover top position</p>
+<p popover="Popover on bottom" popover-position="bottom">Popover bottom position</p>
+<p popover="Popover on right" popover-position="right">Popover right position</p>
+
+ +

But you can also popover on pretty much any element you want, it can be on a button, on a table cell, ...

+ +
+
+ +
+
+ +
+ 
+<button popover="Popover on top" popover-position="top">Popover on top and on a button!</button>
+
+

Colors

Text

diff --git a/src/popovers.less b/src/popovers.less new file mode 100644 index 0000000..4b0d727 --- /dev/null +++ b/src/popovers.less @@ -0,0 +1,80 @@ +// Core popover +[popover] { + position: relative; + margin: 24px; +} + +// Popover hover trigger +[popover]:hover { + &::after { + transition: opacity .2s ease-out; + opacity: 1; + } +} + +// Creating popover::after element +[popover]::after { + content: attr(popover); + position: absolute; + top: -6px; + left: 50%; + opacity: 0; + padding: 4px 2px; + min-width: 80px; + font-size: 0.7em; + text-align: center; + color: #fff; + background: rgba(0,0,0,0.7); + transition: opacity .25s ease-out; + transform: translateX(-50%) translateY(-100%); + .border; +} + +// Popover positioning: left, right, top, bottom +[popover-position='left']::before { + left: 0%; + top: 50%; + margin-left: -12px; + transform: translatey(-50%) rotate(-90deg); +} + +[popover-position='left']::after { + left: 0%; + top: 50%; + margin-left: -8px; + transform: translateX(-100%) translateY(-50%); +} + +[popover-position='top']::before { + left: 50%; +} + +[popover-position='top']::after { + left: 50%; +} + +[popover-position='bottom']::before { + top:100%; + margin-top: 8px; + transform: translateX(-50%) translatey(-100%) rotate(-180deg); +} + +[popover-position='bottom']::after { + top: 100%; + margin-top: 8px; + transform: translateX(-50%) translateY(0%); +} + +[popover-position='right']::before { + left: 100%; + top: 50%; + margin-left: 1px; + transform: translatey(-50%) rotate(90deg); +} + +[popover-position='right']::after { + left: 100%; + top: 50%; + margin-left: 8px; + transform: translateX(0%) translateY(-50%); +} diff --git a/src/styles.less b/src/styles.less index 0d60647..3e8b4bd 100644 --- a/src/styles.less +++ b/src/styles.less @@ -12,4 +12,5 @@ @import (less) "./code.less"; @import (less) "./tables.less"; @import (less) "./images.less"; -@import (less) "./utilities.less"; \ No newline at end of file +@import (less) "./utilities.less"; +@import (less) "./popovers.less"; \ No newline at end of file From 9bdc85871457a030608a4b74f9d79df51dc5aed8 Mon Sep 17 00:00:00 2001 From: Thomas Cazade Date: Tue, 31 Oct 2017 00:01:46 +0100 Subject: [PATCH 2/2] Fixed Eric Claption typo --- index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 0a3245d..9c854bb 100644 --- a/index.html +++ b/index.html @@ -429,7 +429,7 @@ function add(x, y) { 2 - Eric Claption + Eric Clapton Musician Ohio, USA @@ -460,7 +460,7 @@ function add(x, y) { 2 - Eric Claption + Eric Clapton Musician Ohio, USA @@ -491,7 +491,7 @@ function add(x, y) { 2 - Eric Claption + Eric Clapton Musician Ohio, USA @@ -523,7 +523,7 @@ function add(x, y) { </tr> <tr> <td>2</td> - <td>Eric Claption</td> + <td>Eric Clapton</td> <td>Musician</td> <td>Ohio, USA</td> </tr> @@ -576,7 +576,7 @@ function add(x, y) {
- + 
 <button popover="Popover on top" popover-position="top">Popover on top and on a button!</button>