/*! * popover.css — Core styles for jquery.popover.js * ───────────────────────────────────────────────────────────────────────────── * This file contains ONLY what the plugin needs to function. * It has zero page-chrome, typography, or demo styles. * * Include this in any project that uses jquery.popover.js. * Style the content inside .popover-box however you like. * * Theming: override the CSS custom properties below in :root (global) * or on any ancestor selector (scoped). See README.md for details. * ───────────────────────────────────────────────────────────────────────────── */ /* ── Design tokens ───────────────────────────────────────────────────────── All visual values live here. Override in :root or a scoped selector — never edit these defaults directly so updates stay clean. ─────────────────────────────────────────────────────────────────────────── */ :root { --popover-bg: #fafafa; /* box fill */ --popover-border: #f85e2b; /* box + arrow border */ --popover-shadow: 0 0 0 rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35); --popover-radius: 25px; /* border-radius */ --popover-padding: 16px 18px; /* inner padding */ --popover-max-width: min(545px, calc(100vw - 24px)); /* responsive cap */ --popover-arrow-size: 30px; /* keep in sync with JS option: arrowSize */ --popover-z: 99999; /* stacking order */ --popover-duration: 0.18s; /* open/close speed */ --borderSize: 4px; } /* ── Fixed mount-point ───────────────────────────────────────────────────── Injected into once by the plugin. All .popover-box elements are reparented here so they are never clipped by overflow:hidden ancestors. ─────────────────────────────────────────────────────────────────────────── */ #popover-plugin-container { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: var(--popover-z); pointer-events: none; } /* ── Popover box — hidden state ──────────────────────────────────────────── visibility (not display) is used so CSS transitions play on both open AND close. visibility is delayed on close so the fade-out completes before the element is removed from interaction. ─────────────────────────────────────────────────────────────────────────── */ .popover-box { position: absolute; pointer-events: none; /* no interaction while hidden */ background: var(--popover-bg); border: var(--borderSize) solid var(--popover-border); border-radius: var(--popover-radius); box-shadow: var(--popover-shadow); padding: var(--popover-padding); max-width: var(--popover-max-width); width: max-content; visibility: hidden; opacity: 0; transform: scale(0.95) translateY(-4px); transition: opacity var(--popover-duration) ease, transform var(--popover-duration) ease, visibility 0s linear var(--popover-duration); /* delayed: hide after fade */ } /* ── Popover box — visible state ─────────────────────────────────────────── .is-visible is added/removed by the plugin. ─────────────────────────────────────────────────────────────────────────── */ .popover-box.is-visible { pointer-events: auto; visibility: visible; opacity: 1; transform: scale(1) translateY(0); transition: opacity var(--popover-duration) ease, transform var(--popover-duration) ease, visibility 0s linear 0s; /* instant: show immediately */ } /* ── Arrow — shared base ─────────────────────────────────────────────────── Two pseudo-elements per placement create a border-triangle (::before) with a slightly smaller fill-triangle (::after) on top. Arrow offset is written by JS as CSS custom properties: --popover-arrow-left used by pos-top and pos-bottom --popover-arrow-top used by pos-left and pos-right ─────────────────────────────────────────────────────────────────────────── */ .popover-box::before, .popover-box::after { content: ""; position: absolute; width: 0; height: 0; border: var(--popover-arrow-size) solid transparent; pointer-events: none; } /* Fill triangle is 1 px smaller to sit inside the border triangle */ .popover-box::after { border-width: calc(var(--popover-arrow-size) + var(--borderSize)); } /* ── pos-bottom — arrow points UP (box is below the trigger) ───────────── */ .popover-box.pos-bottom::before { top: calc(var(--popover-arrow-size) * -1.97); left: var(--popover-arrow-left, 50%); margin-left: -30px; transform: translateX(-50%); /* border-bottom-color: var(--popover-border); */ background-image: url(../img/tooltip-angle.png); background-repeat: no-repeat; background-size: 82px 58px; background-position: center center; } .popover-box.pos-bottom::after { top: calc((var(--popover-arrow-size) - 1px) * -2 + 1px); left: var(--popover-arrow-left, 50%); margin-left: -30px; transform: translateX(-50%); border-bottom-color: var(--popover-bg); } /* ── pos-top — arrow points DOWN (box is above the trigger) ────────────── */ .popover-box.pos-top::before { bottom: calc(var(--popover-arrow-size) * -1.97); left: var(--popover-arrow-left, 50%); transform: translateX(-50%); margin-left: -30px; /* border-top-color: var(--popover-border); */ background-image: url(../img/tooltip-angle-bottom.png); background-repeat: no-repeat; background-size: 82px 58px; background-position: center center; } .popover-box.pos-top::after { bottom: calc((var(--popover-arrow-size) - 1px) * -2 + 1px); left: var(--popover-arrow-left, 50%); margin-left: -30px; transform: translateX(-50%); border-top-color: var(--popover-bg); } /* ── pos-right — arrow points LEFT (box is right of the trigger) ────────── */ .popover-box.pos-right::before { left: calc(var(--popover-arrow-size) * -2); top: var(--popover-arrow-top, 50%); transform: translateY(-50%); border-right-color: var(--popover-border); } .popover-box.pos-right::after { left: calc((var(--popover-arrow-size) - 1px) * -2 + 1px); top: var(--popover-arrow-top, 50%); transform: translateY(-50%); border-right-color: var(--popover-bg); } /* ── pos-left — arrow points RIGHT (box is left of the trigger) ─────────── */ .popover-box.pos-left::before { right: calc(var(--popover-arrow-size) * -2); top: var(--popover-arrow-top, 50%); transform: translateY(-50%); border-left-color: var(--popover-border); } .popover-box.pos-left::after { right: calc((var(--popover-arrow-size) - 1px) * -2 + 1px); top: var(--popover-arrow-top, 50%); transform: translateY(-50%); border-left-color: var(--popover-bg); } @media (max-width: 1199px) { .popover-box.pos-bottom::before { top: calc(var(--popover-arrow-size) * -1.95); } }