add tooltip delay & animation
delay of 1.5s
This commit is contained in:
parent
e46c7b1ac7
commit
af809e51ea
1 changed files with 19 additions and 6 deletions
|
@ -28,8 +28,20 @@ span[data-tooltip] {
|
|||
}
|
||||
a[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;
|
||||
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;
|
||||
top: -34px;
|
||||
background-color: #c6c6c5;
|
||||
|
@ -40,19 +52,17 @@ span[data-tooltip]:before {
|
|||
padding: 0 13px;
|
||||
content: attr(data-tooltip);
|
||||
white-space: nowrap;
|
||||
display: none;
|
||||
transform-origin: 17px 26px;
|
||||
}
|
||||
a[data-tooltip]:after,
|
||||
time[data-tooltip]:after,
|
||||
span[data-tooltip]:after {
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: -8px;
|
||||
border-top: 7px solid #c6c6c5;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
content: "";
|
||||
display: none;
|
||||
transform-origin: 4px 0;
|
||||
}
|
||||
a[data-tooltip]:hover:after,
|
||||
a[data-tooltip]:hover:before,
|
||||
|
@ -60,7 +70,10 @@ time[data-tooltip]:hover:after,
|
|||
time[data-tooltip]:hover:before,
|
||||
span[data-tooltip]:hover:after,
|
||||
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 {
|
||||
|
|
Loading…
Reference in a new issue