/** * WhoKnew Shield - Tooltip Component * Tooltips are detached from the DOM and appended to via tooltip.js * so they are never clipped by overflow:hidden parent containers. * * @package WhoKnew_Shield */ /* Tooltip Container */ .whoknew-tooltip-wrapper { position: relative; display: inline-flex; align-items: center; } /* Tooltip Trigger Icon */ .whoknew-tooltip-trigger { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; background: #e5e7eb; color: #6b7280; border-radius: 50%; font-size: 12px; font-weight: 600; cursor: help; transition: all 0.2s ease; border: none; padding: 0; line-height: 1; } .whoknew-tooltip-trigger:hover, .whoknew-tooltip-trigger:focus { background: #d1d5db; color: #374151; outline: none; } /* * Tooltip Content * Base styles only — position is controlled entirely by tooltip.js. * The element is detached from its original parent and appended to , * so position:fixed coordinates are set via JavaScript on hover/focus. */ .whoknew-tooltip-content { position: fixed; min-width: 280px; max-width: 380px; padding: 12px 16px; background: #1f2937; color: #f9fafb; font-size: 13px; line-height: 1.5; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; z-index: 99999; pointer-events: none; white-space: normal; } /* Arrow — points downward toward the trigger */ .whoknew-tooltip-content::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #1f2937; } /* Stats Section Header with Tooltip */ .whoknew-stats-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .whoknew-stats-header h3 { font-size: 16px; font-weight: 700; color: #111827; margin: 0; display: flex; align-items: center; } /* Responsive adjustments */ @media (max-width: 782px) { .whoknew-tooltip-content { min-width: 220px; max-width: 280px; font-size: 12px; } }