Add initial tooltip implementation
Addy Osmani
parent
bd206e7c66
commit
6b5fb2b644
|
|
@ -131,6 +131,12 @@
|
|||
<iframe src="./styleguide/header-panel/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Tooltip</h1>
|
||||
<iframe src="./styleguide/tooltip/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Column Layout</h1>
|
||||
<iframe src="./styleguide/column-layout/demo.html"></iframe>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Tooltip</title>
|
||||
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="preview-block">
|
||||
|
||||
<div id="el1" class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M0 0h24v24h-24z" fill="none" />
|
||||
<path d="M14 2h-8c-1.1 0-1.99.9-1.99 2l-.01 16c0 1.1.89 2 1.99 2h12.01c1.1 0 2-.9 2-2v-12l-6-6zm2 14h-3v3h-2v-3h-3v-2h3v-3h2v3h3v2zm-3-7v-5.5l5.5 5.5h-5.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="tooltip" for="el1">
|
||||
Simple tooltip
|
||||
</div>
|
||||
|
||||
<div id="el2" class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
||||
<path d="M0 0h18v18h-18z" fill="none" />
|
||||
<path d="M6 8c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm6 0c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm-3 5.5c2.14 0 3.92-1.5 4.38-3.5h-8.76c.46 2 2.24 3.5 4.38 3.5zm0-12.5c-4.43 0-8 3.58-8 8s3.57 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="tooltip" for="el2">
|
||||
This is a
|
||||
<strong>rich tooltip</strong>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="el3" class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
||||
<path d="M0 0h18v18h-18z" fill="none" />
|
||||
<path d="M6 8c1.11 0 2-.9 2-2s-.89-2-2-2c-1.1 0-2 .9-2 2s.9 2 2 2zm6 0c1.11 0 2-.9 2-2s-.89-2-2-2c-1.11 0-2 .9-2 2s.9 2 2 2zm-6 1.2c-1.67 0-5 .83-5 2.5v1.3h10v-1.3c0-1.67-3.33-2.5-5-2.5zm6 0c-.25 0-.54.02-.84.06.79.6 1.34 1.4 1.34 2.44v1.3h4.5v-1.3c0-1.67-3.33-2.5-5-2.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="tooltip" for="el3" class="right">
|
||||
This is an example of a long tooltip that wraps
|
||||
</div>
|
||||
<div id="el4" class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
||||
<path d="M0 0h18v18h-18z" fill="none" />
|
||||
<path d="M2 13.5h14v-1.5h-14v1.5zm0-4h14v-1.5h-14v1.5zm0-5.5v1.5h14v-1.5h-14z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="tooltip large" for="el4">
|
||||
Element with a large tooltip
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="tooltip.js"></script>
|
||||
<script src="../third_party/rAF.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
});
|
||||
Loading…
Reference in New Issue