master @ 45 LINES
[ HISTORY ] [ UP ]
┌─ SCSS ─────────────────────────────────────────────────────────────────────┐
│ .tooltip { │
│ position: relative; │
│ display: inline-block; │
│ white-space: pre; │
│ │
│ .tooltip-trigger { │
│ font: inherit; │
│ color: var(--ink-soft); │
│ background: none; │
│ border: 0; │
│ padding: 0; │
│ margin: 0; │
│ cursor: help; │
│ white-space: pre; │
│ │
│ &:hover { │
│ color: var(--ink); │
│ } │
│ │
│ &:focus-visible { │
│ outline: 1px dashed var(--ink); │
│ outline-offset: 1px; │
│ } │
│ } │
│ │
│ .tooltip-pop { │
│ position: absolute; │
│ bottom: 100%; │
│ left: 0; │
│ z-index: 10; │
│ display: none; │
│ background: var(--paper); │
│ box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.3); │
│ │
│ pre.ascii.tooltip-frame { │
│ width: auto; │
│ } │
│ } │
│ │
│ &:hover .tooltip-pop, │
│ &:focus-within .tooltip-pop { │
│ display: block; │
│ } │
│ } │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ SCSS ───────────────────────────────┐
│ .tooltip { │
│ position: relative; │
│ display: inline-block; │
│ white-space: pre; │
│ │
│ .tooltip-trigger { │
│ font: inherit; │
│ color: var(--ink-soft); │
│ background: none; │
│ border: 0; │
│ padding: 0; │
│ margin: 0; │
│ cursor: help; │
│ white-space: pre; │
│ │
│ &:hover { │
│ color: var(--ink); │
│ } │
│ │
│ &:focus-visible { │
│ outline: 1px dashed var(--ink); │
│ outline-offset: 1px; │
│ } │
│ } │
│ │
│ .tooltip-pop { │
│ position: absolute; │
│ bottom: 100%; │
│ left: 0; │
│ z-index: 10; │
│ display: none; │
│ background: var(--paper); │
│ box-shadow: 0 8px 24px -12px rgba(0, 0, │
│ 0, 0.3); │
│ │
│ pre.ascii.tooltip-frame { │
│ width: auto; │
│ } │
│ } │
│ │
│ &:hover .tooltip-pop, │
│ &:focus-within .tooltip-pop { │
│ display: block; │
│ } │
│ } │
└──────────────────────────────────────────────┘
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET