Add initial tooltip implementation
Addy Osmani
parent
bd206e7c66
commit
6b5fb2b644
|
|
@ -131,6 +131,12 @@
|
||||||
<iframe src="./styleguide/header-panel/demo.html" scrolling="no"></iframe>
|
<iframe src="./styleguide/header-panel/demo.html" scrolling="no"></iframe>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="styleguide-demo">
|
||||||
|
<h1>Tooltip</h1>
|
||||||
|
<iframe src="./styleguide/tooltip/demo.html" scrolling="no"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="styleguide-demo">
|
<div class="styleguide-demo">
|
||||||
<h1>Column Layout</h1>
|
<h1>Column Layout</h1>
|
||||||
<iframe src="./styleguide/column-layout/demo.html"></iframe>
|
<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