Skip to content

Commit

Permalink
Add tooltips on hover (Issue #83)
Browse files Browse the repository at this point in the history
  • Loading branch information
@gianjohansen
gianjohansen committed Apr 9, 2018
1 parent d1004d3 commit 980ddb1
Show file tree
Hide file tree
Showing 4 changed files with 231 additions and 30 deletions.
54 changes: 53 additions & 1 deletion demo/demo.css
View file
Expand Up @@ -58,7 +58,59 @@ main {
max-width: 25%;
height: 200px;
align-items: center;
justify-content: center; }
justify-content: center;
perspective: 500px; }
main .loaders .loader .tooltip {
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
-webkit-transform: translate3d(-50%, 0%, 0);
transform: translate3d(-50%, 0%, 0);
-webkit-transform-origin: 0 10px;
transform-origin: 0 10px;
background-color: #fff;
border-radius: 4px;
color: #2f2f2f;
display: block;
font-size: 14px;
line-height: 1;
left: 50%;
opacity: 0;
padding: 4px 20px;
position: absolute;
text-align: left;
top: 80%;
pointer-events: none;
white-space: nowrap; }
main .loaders .loader .tooltip:before {
border: 6px solid;
border-color: transparent;
border-bottom-color: #fff;
content: ' ';
display: block;
height: 0;
left: 50%;
margin-left: -10px;
position: absolute;
top: -12px;
width: 0; }
main .loaders .loader .tooltip:after {
content: ' ';
display: block;
position: absolute;
bottom: -20px;
left: 0;
width: 100%;
height: 20px; }
main .loaders .loader .tooltip:hover {
-webkit-transform: rotateX(0deg) translate3d(-50%, -10%, 0);
transform: rotateX(0deg) translate3d(-50%, -10%, 0);
opacity: 1;
pointer-events: auto; }
main .loaders .loader:hover .tooltip {
-webkit-transform: translate3d(-50%, -10%, 0);
transform: translate3d(-50%, -10%, 0);
opacity: 1;
pointer-events: auto; }

/**
* Util classes
Expand Down
87 changes: 58 additions & 29 deletions demo/demo.html
View file
Expand Up @@ -19,7 +19,8 @@ <h2>Delightful and performance-focused pure css loading animations.</h2>
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>ball-pulse</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-grid-pulse">
Expand All @@ -32,29 +33,34 @@ <h2>Delightful and performance-focused pure css loading animations.</h2>
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>ball-grid-pulse</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-clip-rotate">
<div></div>
</div>
</div><span class="tooltip">
<p>ball-clip-rotate</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-clip-rotate-pulse">
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>ball-clip-rotate-pulse</p></span>
</div>
<div class="loader">
<div class="loader-inner square-spin">
<div></div>
</div>
</div><span class="tooltip">
<p>square-spin</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-clip-rotate-multiple">
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>ball-clip-rotate-multiple</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-pulse-rise">
Expand All @@ -63,42 +69,49 @@ <h2>Delightful and performance-focused pure css loading animations.</h2>
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>ball-pulse-rise</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-rotate">
<div></div>
</div>
</div><span class="tooltip">
<p>ball-rotate</p></span>
</div>
<div class="loader">
<div class="loader-inner cube-transition">
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>cube-transition</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-zig-zag">
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>ball-zig-zag</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-zig-zag-deflect">
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>ball-zig-zag-deflect</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-triangle-path">
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>ball-triangle-path</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-scale">
<div></div>
</div>
</div><span class="tooltip">
<p>ball-scale</p></span>
</div>
<div class="loader">
<div class="loader-inner line-scale">
Expand All @@ -107,36 +120,41 @@ <h2>Delightful and performance-focused pure css loading animations.</h2>
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>line-scale</p></span>
</div>
<div class="loader">
<div class="loader-inner line-scale-party">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>line-scale-party</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-scale-multiple">
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>ball-scale-multiple</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-pulse-sync">
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>ball-pulse-sync</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-beat">
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>ball-beat</p></span>
</div>
<div class="loader">
<div class="loader-inner line-scale-pulse-out">
Expand All @@ -145,7 +163,8 @@ <h2>Delightful and performance-focused pure css loading animations.</h2>
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>line-scale-pulse-out</p></span>
</div>
<div class="loader">
<div class="loader-inner line-scale-pulse-out-rapid">
Expand All @@ -154,19 +173,22 @@ <h2>Delightful and performance-focused pure css loading animations.</h2>
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>line-scale-pulse-out-rapid</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-scale-ripple">
<div></div>
</div>
</div><span class="tooltip">
<p>ball-scale-ripple</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-scale-ripple-multiple">
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>ball-scale-ripple-multiple</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-spin-fade-loader">
Expand All @@ -178,7 +200,8 @@ <h2>Delightful and performance-focused pure css loading animations.</h2>
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>ball-spin-fade-loader</p></span>
</div>
<div class="loader">
<div class="loader-inner line-spin-fade-loader">
Expand All @@ -190,12 +213,14 @@ <h2>Delightful and performance-focused pure css loading animations.</h2>
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>line-spin-fade-loader</p></span>
</div>
<div class="loader">
<div class="loader-inner triangle-skew-spin">
<div></div>
</div>
</div><span class="tooltip">
<p>triangle-skew-spin</p></span>
</div>
<div class="loader">
<div class="loader-inner pacman">
Expand All @@ -204,12 +229,14 @@ <h2>Delightful and performance-focused pure css loading animations.</h2>
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>pacman</p></span>
</div>
<div class="loader">
<div class="loader-inner semi-circle-spin">
<div></div>
</div>
</div><span class="tooltip">
<p>semi-circle-spin</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-grid-beat">
Expand All @@ -222,14 +249,16 @@ <h2>Delightful and performance-focused pure css loading animations.</h2>
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>ball-grid-beat</p></span>
</div>
<div class="loader">
<div class="loader-inner ball-scale-random">
<div></div>
<div></div>
<div></div>
</div>
</div><span class="tooltip">
<p>ball-scale-random</p></span>
</div>
</div>
</main>
Expand Down

0 comments on commit 980ddb1

Please sign in to comment.