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);
+});