.tippy-box[data-animation="fade"][data-state="hidden"] { opacity: 0; } [data-tippy-root] { max-width: calc(100vw - 10px); } .tippy-box { position: relative; background-color: var(--color-elevation-2); color: var(--color-base-1000); border-radius: 0.5rem; border: 1px solid var(--color-base-650); box-shadow: 0 20px 25px -5px var(--color-shadow-2), 0 0 10px -6px var(--color-shadow-2); transition-property: transform, visibility, opacity; box-sizing: border-box; } .tippy-box[data-placement^="top"] > .tippy-arrow { bottom: 0; } .tippy-box[data-placement^="top"] > .tippy-arrow:before { bottom: -8px; left: 0; border-width: 8px 8px 0; border-top-color: initial; transform-origin: center top; } .tippy-box[data-placement^="bottom"] > .tippy-arrow { top: 0; } .tippy-box[data-placement^="bottom"] > .tippy-arrow:before { top: -8px; left: 0; border-width: 0 8px 8px; border-bottom-color: initial; transform-origin: center bottom; } .tippy-box[data-placement^="left"] > .tippy-arrow { right: 0; } .tippy-box[data-placement^="left"] > .tippy-arrow:before { border-width: 8px 0 8px 8px; border-left-color: initial; right: -8px; transform-origin: center left; } .tippy-box[data-placement^="right"] > .tippy-arrow { left: 0; } .tippy-box[data-placement^="right"] > .tippy-arrow:before { left: -8px; border-width: 8px 8px 8px 0; border-right-color: initial; transform-origin: center right; } .tippy-box[data-inertia][data-state="visible"] { transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); } .tippy-arrow { width: 1em; height: 1em; color: var(--color-base-650); } .tippy-arrow:before { content: ""; position: absolute; border-color: transparent; border-style: solid; } .tippy-content { position: relative; padding: 1rem 1.5rem; z-index: 1; } .tippy-box[data-placement^="top"] { transform-origin: bottom; } .tippy-box[data-placement^="bottom"] { transform-origin: top; } .tippy-box[data-placement^="left"] { transform-origin: right; } .tippy-box[data-placement^="right"] { transform-origin: left; } .tippy-box[data-state="hidden"] { transform: scale(0.8); opacity: 0; }