diff --git a/comparisons/interactions/tooltips/caniuse.txt b/comparisons/interactions/tooltips/caniuse.txt new file mode 100644 index 0000000..b5d9f0a --- /dev/null +++ b/comparisons/interactions/tooltips/caniuse.txt @@ -0,0 +1 @@ +Transition: http://caniuse.com/#feat=css-transitions diff --git a/comparisons/interactions/tooltips/codepen.html b/comparisons/interactions/tooltips/codepen.html new file mode 100644 index 0000000..5fd945b --- /dev/null +++ b/comparisons/interactions/tooltips/codepen.html @@ -0,0 +1 @@ +

See the Pen CSS Tooltips: youmightnotneedjs.com by Joseph J Guerra (@josephjguerra) on CodePen.

diff --git a/comparisons/interactions/tooltips/css.css b/comparisons/interactions/tooltips/css.css new file mode 100644 index 0000000..31a286b --- /dev/null +++ b/comparisons/interactions/tooltips/css.css @@ -0,0 +1,45 @@ +.tooltip { + position: relative; + cursor: help; + color: #c69; + border-bottom: 2px dotted #c69; +} + +.tooltip::before, +.tooltip::after { + position: absolute; + left: 50%; + opacity: 0; + z-index: -100; + transition: opacity .5s; +} + +.tooltip:hover::before, +.tooltip:focus::before, +.tooltip:hover::after, +.tooltip:focus::after { + opacity: 1; + z-index: 100; +} + +/* makes the tooltip ballon */ +.tooltip::before { + background: #c69; + border-radius: 0.3em; + bottom: 185%; + color: #fff; + width: 14em; + padding: 0.5em; + margin-left: -8em; + content: attr(data-tip); +} + +/* makes the triangle part of the tooltip */ +.tooltip::after { + content: ""; + border-style: solid; + border-width: 1em .75em 0 .75em; + border-color: #c69 transparent transparent transparent; + bottom: 100%; + margin-left: -0.5em; +} diff --git a/comparisons/interactions/tooltips/html.html b/comparisons/interactions/tooltips/html.html new file mode 100644 index 0000000..3be9e2e --- /dev/null +++ b/comparisons/interactions/tooltips/html.html @@ -0,0 +1,5 @@ +

You can use good old HTML and CSS to make tooltips, instead of jQuery or JavaScript.

+ +

To create a tooltip, add the tooltip class and data-tip attribute with your message.

+ +

These tooltips work with tabindex too. Try it with tab on your keyboard.

diff --git a/comparisons/interactions/tooltips/resources.txt b/comparisons/interactions/tooltips/resources.txt new file mode 100644 index 0000000..109e937 --- /dev/null +++ b/comparisons/interactions/tooltips/resources.txt @@ -0,0 +1,2 @@ +CSS Portal Tooltip Generator: http://www.cssportal.com/css-tooltip-generator/ +Balloon.css: https://kazzkiq.github.io/balloon.css/ diff --git a/index.html b/index.html index 2926d35..7aaf8c8 100644 --- a/index.html +++ b/index.html @@ -213,10 +213,10 @@

HTML

<!-- Navigation for the slides --> <ul> - <li><a href="#slide-1">1</a></li> - <li><a href="#slide-2">2</a></li> - <li><a href="#slide-3">3</a></li> - <li><a href="#slide-4">4</a></li> + <li><a href="#slide-1" aria-label="Image 1">1</a></li> + <li><a href="#slide-2" aria-label="Image 2">2</a></li> + <li><a href="#slide-3" aria-label="Image 3">3</a></li> + <li><a href="#slide-4" aria-label="Image 4">4</a></li> </ul> </div> @@ -418,6 +418,90 @@

can i use:

+
+

Tooltips

+
+

resources:

+ +
+
+

CODEPEN

See the Pen CSS Tooltips: youmightnotneedjs.com by Joseph J Guerra (@josephjguerra) on CodePen.

+ +
+
+
+

HTML

+
+ 
<p>You can use good old HTML and CSS to make tooltips, instead of jQuery or JavaScript.</p>
+
+<p>To create a tooltip, add the <span class="tooltip" data-tip="tooltips are wicked cool" tabindex="1">tooltip</span> class and  <span class="tooltip" data-tip="data-* stores extra info in HTML5 elements" tabindex="2">data-tip</span> attribute with your message.</p>
+
+<p>These tooltips work with tabindex too. Try it with <span class="tooltip" data-tip="the button next to cap slock" tabindex="3">tab</span> on your keyboard.</p>
+
+
+
+
+

CSS

+
+ 
.tooltip {
+  position: relative;
+  cursor: help;
+  color: #c69;
+  border-bottom: 2px dotted #c69;
+}
+
+.tooltip::before,
+.tooltip::after {
+  position: absolute;
+  left: 50%;
+  opacity: 0;
+  z-index: -100;
+  transition: opacity .5s;
+}
+
+.tooltip:hover::before,
+.tooltip:focus::before,
+.tooltip:hover::after,
+.tooltip:focus::after {
+  opacity: 1;
+  z-index: 100;
+}
+
+/* makes the tooltip ballon */
+.tooltip::before {
+  background: #c69;
+  border-radius: 0.3em;
+  bottom: 185%;
+  color: #fff;
+  width: 14em;
+  padding: 0.5em;
+  margin-left: -8em;
+  content: attr(data-tip);
+}
+
+/* makes the triangle part of the tooltip */
+.tooltip::after {
+  content: "";
+  border-style: solid;
+  border-width: 1em .75em 0 .75em;
+  border-color: #c69 transparent transparent transparent;
+  bottom: 100%;
+  margin-left: -0.5em;
+}
+
+
+
+
+
+

can i use:

+ +
+