Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add tooltip delay & animation

Browse source 
delay of 1.5s
This commit is contained in:
Felix Niklas 2014-08-29 15:17:38 +02:00
parent e46c7b1ac7
commit af809e51ea
1 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
app/assets/stylesheets/zzz.css.erb
View file

@ -28,8 +28,20 @@ span[data-tooltip] {
} }
a[data-tooltip]:before, a[data-tooltip]:before,
time[data-tooltip]:before, time[data-tooltip]:before,
span[data-tooltip]:before { span[data-tooltip]:before,
a[data-tooltip]:after,
time[data-tooltip]:after,
span[data-tooltip]:after {
content: "";
position: absolute; position: absolute;
pointer-events: none;
transform: scale(0);
opacity: 0;
transition: transform 300ms cubic-bezier(0.34,1.6,0.71,1), opacity 300ms;
}
a[data-tooltip]:before,
time[data-tooltip]:before,
span[data-tooltip]:before {
left: 0; left: 0;
top: -34px; top: -34px;
background-color: #c6c6c5; background-color: #c6c6c5;
@ -40,19 +52,17 @@ span[data-tooltip]:before {
padding: 0 13px; padding: 0 13px;
content: attr(data-tooltip); content: attr(data-tooltip);
white-space: nowrap; white-space: nowrap;
display: none; transform-origin: 17px 26px;
} }
a[data-tooltip]:after, a[data-tooltip]:after,
time[data-tooltip]:after, time[data-tooltip]:after,
span[data-tooltip]:after { span[data-tooltip]:after {
position: absolute;
left: 13px; left: 13px;
top: -8px; top: -8px;
border-top: 7px solid #c6c6c5; border-top: 7px solid #c6c6c5;
border-left: 7px solid transparent; border-left: 7px solid transparent;
border-right: 7px solid transparent; border-right: 7px solid transparent;
content: ""; transform-origin: 4px 0;
display: none;
} }
a[data-tooltip]:hover:after, a[data-tooltip]:hover:after,
a[data-tooltip]:hover:before, a[data-tooltip]:hover:before,
@ -60,7 +70,10 @@ time[data-tooltip]:hover:after,
time[data-tooltip]:hover:before, time[data-tooltip]:hover:before,
span[data-tooltip]:hover:after, span[data-tooltip]:hover:after,
span[data-tooltip]:hover:before { span[data-tooltip]:hover:before {
display: block; pointer-events: auto;
transform: scale(1);
opacity: 1;
transition: transform 300ms 1.5s cubic-bezier(0.34,1.6,0.71,1), opacity 300ms 1.5s;
} }
.glyphicon { .glyphicon {