Skip to content

Instantly share code, notes, and snippets.

@wongjiahau
Created February 22, 2018 14:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wongjiahau/5afb0d6278fd944f8fac4bf941237553 to your computer and use it in GitHub Desktop.
Save wongjiahau/5afb0d6278fd944f8fac4bf941237553 to your computer and use it in GitHub Desktop.
[data-tippy][data-tippy-pos]::after,[data-tippy][data-tippy-pos]::before{top:auto;left:auto;margin-top:auto;transform:none}:root{--background-color:#000;--color:#fff;--timing:150ms}[data-tippy]{position:relative}[data-tippy]::after,[data-tippy]::before{position:absolute;display:block;opacity:0;font-family:sans-serif;transform:translate(-50%,0);transform-origin:top;top:100%;left:50%;pointer-events:none}[data-tippy]::before{content:attr(data-tippy);color:var(--color);font-size:14px;background-color:var(--background-color);z-index:1;padding:3px 6px;border-radius:3px;white-space:nowrap;margin-top:10px;font-weight:400}[data-tippy]::after{content:'';border:5px solid transparent;border-bottom-color:var(--background-color)}[data-tippy]:hover::after,[data-tippy]:hover::before{transform:translate(-50%,0);opacity:1}[data-tippy][data-tippy-pos]::after{border-bottom-color:transparent}[data-tippy][data-tippy-pos=up]::after,[data-tippy][data-tippy-pos=up]::before,[data-tippy][data-tippy-pos=down]::after,[data-tippy][data-tippy-pos=down]::before{left:50%}[data-tippy][data-tippy-pos=up]::after,[data-tippy][data-tippy-pos=up]::before{bottom:100%;transform:translate(-50%,0)}[data-tippy][data-tippy-pos=up]::before{margin-bottom:10px}[data-tippy][data-tippy-pos=up]::after{border-top-color:var(--background-color);border-bottom-color:transparent}[data-tippy][data-tippy-pos=down]::after,[data-tippy][data-tippy-pos=down]::before{top:100%;transform:translate(-50%,0)}[data-tippy][data-tippy-pos=down]::before{margin-top:10px}[data-tippy][data-tippy-pos=down]::after{border-bottom-color:var(--background-color);border-top-color:transparent}[data-tippy][data-tippy-pos=left]::after,[data-tippy][data-tippy-pos=left]::before,[data-tippy][data-tippy-pos=right]::after,[data-tippy][data-tippy-pos=right]::before{top:50%}[data-tippy][data-tippy-pos=left]::after,[data-tippy][data-tippy-pos=left]::before{right:100%;transform:translate(0,-50%)}[data-tippy][data-tippy-pos=left]::before{margin-right:10px}[data-tippy][data-tippy-pos=left]::after{border-left-color:var(--background-color)}[data-tippy][data-tippy-pos=right]::after,[data-tippy][data-tippy-pos=right]::before{left:100%;transform:translate(0,-50%)}[data-tippy][data-tippy-pos=right]::before{margin-left:10px}[data-tippy][data-tippy-pos=right]::after{border-right-color:var(--background-color)}[data-tippy][data-tippy-animate]::after,[data-tippy][data-tippy-animate]::before{transition:all var(--timing) ease-out;transition-delay:0s}[data-tippy][data-tippy-animate]:hover::after,[data-tippy][data-tippy-animate]:hover::before{transition-delay:var(--timing)}[data-tippy][data-tippy-animate=slide]::after,[data-tippy][data-tippy-animate=slide]::before,[data-tippy][data-tippy-pos=down][data-tippy-animate=slide]::after,[data-tippy][data-tippy-pos=down][data-tippy-animate=slide]::before{transform:translate(-50%,-10px)}[data-tippy][data-tippy-animate=slide]:hover::after,[data-tippy][data-tippy-animate=slide]:hover::before,[data-tippy][data-tippy-pos=up][data-tippy-animate=slide]:hover::after,[data-tippy][data-tippy-pos=up][data-tippy-animate=slide]:hover::before,[data-tippy][data-tippy-pos=down][data-tippy-animate=slide]:hover::after,[data-tippy][data-tippy-pos=down][data-tippy-animate=slide]:hover::before{transform:translate(-50%,0)}[data-tippy][data-tippy-pos=up][data-tippy-animate=slide]::after,[data-tippy][data-tippy-pos=up][data-tippy-animate=slide]::before{transform:translate(-50%,10px)}[data-tippy][data-tippy-pos=left][data-tippy-animate=slide]::after,[data-tippy][data-tippy-pos=left][data-tippy-animate=slide]::before{transform:translate(10px,-50%)}[data-tippy][data-tippy-pos=right][data-tippy-animate=slide]::after,[data-tippy][data-tippy-pos=right][data-tippy-animate=slide]::before{transform:translate(-10px,-50%)}[data-tippy][data-tippy-pos=left][data-tippy-animate=slide]:hover::after,[data-tippy][data-tippy-pos=left][data-tippy-animate=slide]:hover::before,[data-tippy][data-tippy-pos=right][data-tippy-animate=slide]:hover::after,[data-tippy][data-tippy-pos=right][data-tippy-animate=slide]:hover::before{transform:translate(0,-50%)}[data-tippy][data-tippy-animate=bubble]::after,[data-tippy][data-tippy-animate=bubble]::before{opacity:1;visibility:hidden}[data-tippy][data-tippy-animate=bubble]:hover::after,[data-tippy][data-tippy-animate=bubble]:hover::before{visibility:visible}[data-tippy][data-tippy-animate=bubble]::before,[data-tippy][data-tippy-pos=down][data-tippy-animate=bubble]::before{clip-path:circle(10% at 50% 0)}[data-tippy][data-tippy-animate=bubble]:hover::before,[data-tippy][data-tippy-pos=up][data-tippy-animate=bubble]:hover::before,[data-tippy][data-tippy-pos=down][data-tippy-animate=bubble]:hover::before,[data-tippy][data-tippy-pos=left][data-tippy-animate=bubble]:hover::before,[data-tippy][data-tippy-pos=right][data-tippy-animate=bubble]:hover::before{clip-path:circle(100% at 50%)}[data-tippy][data-tippy-pos=up][data-tippy-animate=bubble]::before{clip-path:circle(10% at 50% 100%)}[data-tippy][data-tippy-pos=left][data-tippy-animate=bubble]::before{clip-path:circle(10% at 100% 50%)}[data-tippy][data-tippy-pos=right][data-tippy-animate=bubble]::before{clip-path:circle(10% at 0 50%)}[data-tippy][data-tippy-visible]::after,[data-tippy][data-tippy-visible]::before{opacity:1;visibility:visible}[data-tippy][data-tippy-size=tiny]::before{font-size:10px}[data-tippy][data-tippy-size=small]::before{font-size:12px}[data-tippy][data-tippy-size=large]::before{font-size:16px}[data-tippy][data-tippy-size=jumbo]::before{font-size:20px}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment