.tippy-box .tippy-content p:last-child {
margin-bottom: 0;
}
.tippy-box[data-placement^=top] > .tippy-backdrop {
transform-origin: 0 25%;
border-radius: 40% 40% 0 0;
}
.tippy-box[data-placement^=top] > .tippy-backdrop[data-state=visible] {
transform: scale(1) translate(-50%, -55%);
}
.tippy-box[data-placement^=top] > .tippy-backdrop[data-state=hidden] {
transform: scale(0.2) translate(-50%, -45%);
}
.tippy-box[data-placement^=bottom] > .tippy-backdrop {
transform-origin: 0 -50%;
border-radius: 0 0 30% 30%;
}
.tippy-box[data-placement^=bottom] > .tippy-backdrop[data-state=visible] {
transform: scale(1) translate(-50%, -45%);
}
.tippy-box[data-placement^=bottom] > .tippy-backdrop[data-state=hidden] {
transform: scale(0.2) translate(-50%);
}
.tippy-box[data-placement^=left] > .tippy-backdrop {
transform-origin: 50% 0;
border-radius: 50% 0 0 50%;
}
.tippy-box[data-placement^=left] > .tippy-backdrop[data-state=visible] {
transform: scale(1) translate(-50%, -50%);
}
.tippy-box[data-placement^=left] > .tippy-backdrop[data-state=hidden] {
transform: scale(0.2) translate(-75%, -50%);
}
.tippy-box[data-placement^=right] > .tippy-backdrop {
transform-origin: -50% 0;
border-radius: 0 50% 50% 0;
}
.tippy-box[data-placement^=right] > .tippy-backdrop[data-state=visible] {
transform: scale(1) translate(-50%, -50%);
}
.tippy-box[data-placement^=right] > .tippy-backdrop[data-state=hidden] {
transform: scale(0.2) translate(-25%, -50%);
}
.tippy-box[data-animatefill] {
background: none !important;
}
.tippy-backdrop {
position: absolute;
background-color: #333;
border-radius: 50%;
width: calc(142%);
left: 50%;
top: 50%;
z-index: -1;
transition: all cubic-bezier(0.46, 0.1, 0.52, 0.98);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.tippy-backdrop[data-state=hidden] {
opacity: 0;
}
.tippy-backdrop:after {
content: "";
float: left;
padding-top: 100%;
}
.tippy-backdrop + .tippy-content {
transition-property: opacity;
will-change: opacity;
}
.tippy-backdrop + .tippy-content[data-state=hidden] {
opacity: 0;
} .tippy-box[data-animation=perspective][data-placement^=top] {
transform-origin: bottom;
}
.tippy-box[data-animation=perspective][data-placement^=top][data-state=visible] {
transform: perspective(700px);
}
.tippy-box[data-animation=perspective][data-placement^=top][data-state=hidden] {
transform: perspective(700px) translateY(8px) rotateX(60deg);
}
.tippy-box[data-animation=perspective][data-placement^=bottom] {
transform-origin: top;
}
.tippy-box[data-animation=perspective][data-placement^=bottom][data-state=visible] {
transform: perspective(700px);
}
.tippy-box[data-animation=perspective][data-placement^=bottom][data-state=hidden] {
transform: perspective(700px) translateY(-8px) rotateX(-60deg);
}
.tippy-box[data-animation=perspective][data-placement^=left] {
transform-origin: right;
}
.tippy-box[data-animation=perspective][data-placement^=left][data-state=visible] {
transform: perspective(700px);
}
.tippy-box[data-animation=perspective][data-placement^=left][data-state=hidden] {
transform: perspective(700px) translateX(8px) rotateY(-60deg);
}
.tippy-box[data-animation=perspective][data-placement^=right] {
transform-origin: left;
}
.tippy-box[data-animation=perspective][data-placement^=right][data-state=visible] {
transform: perspective(700px);
}
.tippy-box[data-animation=perspective][data-placement^=right][data-state=hidden] {
transform: perspective(700px) translateX(-8px) rotateY(60deg);
}
.tippy-box[data-animation=perspective][data-state=hidden] {
opacity: 0;
} .tippy-box[data-animation=scale][data-placement^=top] {
transform-origin: bottom;
}
.tippy-box[data-animation=scale][data-placement^=bottom] {
transform-origin: top;
}
.tippy-box[data-animation=scale][data-placement^=left] {
transform-origin: right;
}
.tippy-box[data-animation=scale][data-placement^=right] {
transform-origin: left;
}
.tippy-box[data-animation=scale][data-state=hidden] {
transform: scale(0.5);
opacity: 0;
} .tippy-box[data-animation=shift-away][data-state=hidden] {
opacity: 0;
}
.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top] {
transform: translateY(10px);
}
.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom] {
transform: translateY(-10px);
}
.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left] {
transform: translateX(10px);
}
.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right] {
transform: translateX(-10px);
} .tippy-box[data-animation=shift-toward][data-state=hidden] {
opacity: 0;
}
.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=top] {
transform: translateY(-10px);
}
.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=bottom] {
transform: translateY(10px);
}
.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=left] {
transform: translateX(-10px);
}
.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=right] {
transform: translateX(10px);
}