Hovertips Animation

footnote¹
footnote²

:root {
    --closeDelay: .25s;
}
body {
    overflow-x: hidden;
}
.hovertip {
    background-color: #600!important;
    border: none!important;
    box-shadow: -1px 1px 5px #333;
    cursor: pointer;
    display: block!important;
    left: unset!important;
    max-width: 60vw;
    padding: 0 0 0 3em;
    position: fixed!important;
    right: -1px;
    top: 0!important;
    transform: translateX(150%);
    transition: all .4s var(--closeDelay) ease;
    width: 300px!important;
}
.hovertip[style*="block"] {
    transform: translateX(0);
    transition: all .4s ease;
    z-index: 20;
}
.hovertip > .content {
    background-color: #600;
    color: #600;
    padding: 1em .5em;
    position: relative;
    transform: translateX(-50%);
    transition: all .8s var(--closeDelay) ease;
}
.hovertip[style*="block"] > .content {
    background-color: #333;
    color: #fff;
    transform: translateX(0);
    transition: all .8s ease;
}
.hovertip > .content .f-footer {
    display: none;
}

Footnotes

1. footnote text

2. footnote text