From 6b5fb2b644d58ccf8b3a1206f35ea6305b750adf Mon Sep 17 00:00:00 2001 From: Addy Osmani Date: Fri, 7 Nov 2014 16:19:52 +0000 Subject: [PATCH] Add initial tooltip implementation --- app/material-styleguide.html | 6 +++ app/styleguide/tooltip/_tooltip.scss | 44 ++++++++++++++++++ app/styleguide/tooltip/demo.html | 68 ++++++++++++++++++++++++++++ app/styleguide/tooltip/demo.scss | 31 +++++++++++++ app/styleguide/tooltip/tooltip.js | 29 ++++++++++++ 5 files changed, 178 insertions(+) create mode 100644 app/styleguide/tooltip/_tooltip.scss create mode 100644 app/styleguide/tooltip/demo.html create mode 100644 app/styleguide/tooltip/demo.scss create mode 100644 app/styleguide/tooltip/tooltip.js diff --git a/app/material-styleguide.html b/app/material-styleguide.html index b26310fc..2f74f3fc 100644 --- a/app/material-styleguide.html +++ b/app/material-styleguide.html @@ -131,6 +131,12 @@ + +
+

Tooltip

+ +
+

Column Layout

diff --git a/app/styleguide/tooltip/_tooltip.scss b/app/styleguide/tooltip/_tooltip.scss new file mode 100644 index 00000000..61a3e653 --- /dev/null +++ b/app/styleguide/tooltip/_tooltip.scss @@ -0,0 +1,44 @@ +@import "../palette/palette"; +@import "../typography/typography"; + + +.tooltip { + -webkit-transform: scale(0); + -webkit-transform-origin: top center; + background: nth($accentPalette, 7); + border-radius: 5px; + color: #fff; + display: inline-block; + font-size: 10px; + line-height: 14px; + max-width: 170px; + padding: 5px 8px; + position: absolute; + text-align: center; +} +.tooltip.active { + -webkit-animation: pulse 200ms cubic-bezier(0, 0, .2, 1) forwards; + animation: pulse 200ms cubic-bezier(0, 0, .2, 1) forwards; +} + +.tooltip.large { + line-height: 14px; + font-size: 14px; + padding: 16px; +} + + +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(0); + opacity: 0; + } + 50% { + -webkit-transform: scale(1); + } + 100% { + -webkit-transform: scale(1); + opacity: 1; + visibility: visible; + } +} \ No newline at end of file diff --git a/app/styleguide/tooltip/demo.html b/app/styleguide/tooltip/demo.html new file mode 100644 index 00000000..d1c0c631 --- /dev/null +++ b/app/styleguide/tooltip/demo.html @@ -0,0 +1,68 @@ + + + + + + + + + Tooltip + + + + + + + + + +
+ +
+ + + + +
+
+ Simple tooltip +
+ +
+ + + + +
+
+ This is a + rich tooltip +
+ + +
+ + + + +
+ +
+ This is an example of a long tooltip that wraps +
+
+ + + + +
+
+ Element with a large tooltip +
+
+ + + + + + diff --git a/app/styleguide/tooltip/demo.scss b/app/styleguide/tooltip/demo.scss new file mode 100644 index 00000000..3ec46599 --- /dev/null +++ b/app/styleguide/tooltip/demo.scss @@ -0,0 +1,31 @@ +@import "../styleguide_demo_bp"; +@import "_tooltip"; + +body { + background : #fff; + padding: 20px; + +} + +.preview-block { + background: #eee; + padding : 20px; + height: 120px; +} + +.icon { + background-color: transparent; + border: none; + display: inline-block; + height: 21px; + margin: 0 50px; + opacity: .7; + outline: none; + padding: 0; + position: relative; + width: 21px; +} + +icon:hover { + opacity: 1; +} diff --git a/app/styleguide/tooltip/tooltip.js b/app/styleguide/tooltip/tooltip.js new file mode 100644 index 00000000..9d48e352 --- /dev/null +++ b/app/styleguide/tooltip/tooltip.js @@ -0,0 +1,29 @@ +document.addEventListener('DOMContentLoaded', function() { + + var tooltips = Array.prototype.slice.call(document.querySelectorAll('.tooltip')); + + initializeCheckboxes = function(els) { + + if (!!els) { + Array.prototype.forEach.call(els, function(el, i) { + var forElId = el.getAttribute('for'); + var forEl = document.querySelector('#' + forElId); + forEl.addEventListener('mouseenter', function(e) { + e.stopPropagation(); + var element = document.querySelector('.tooltip[for="' + this.id + '"]'); + var props = this.getBoundingClientRect(); + element.style.left = props.left + (props.width / 2) + 'px'; + element.style.marginLeft = -1 * (element.offsetWidth / 2) + 'px'; + element.style.top = props.top + props.height + 10 + 'px'; + element.classList.add('active'); + }, false); + forEl.addEventListener('mouseleave', function(e) { + e.stopPropagation(); + var element = document.querySelector('.tooltip[for="' + this.id + '"]'); + element.classList.remove('active'); + }); + }); + } + } + initializeCheckboxes(tooltips); +});