@@ -1908,7 +1931,7 @@ class TooltipManager {
handleMouseEnter(e) {
if (!e.target || !e.target.closest) return;
- const trigger = e.target.closest(".info-trigger");
+ const trigger = e.target.closest(".info-trigger, .warning-trigger");
if (!trigger) return;
clearTimeout(this.hideTimeout);
@@ -1919,7 +1942,7 @@ class TooltipManager {
handleMouseLeave(e) {
if (!e.target || !e.target.closest) return;
- const trigger = e.target.closest(".info-trigger");
+ const trigger = e.target.closest(".info-trigger, .warning-trigger");
const tooltip = e.target.closest(".tooltip");
if (!trigger && !tooltip) return;
@@ -1927,7 +1950,7 @@ class TooltipManager {
// Check if moving between trigger and tooltip
const relatedTarget = e.relatedTarget;
if (
- relatedTarget?.closest?.(".info-trigger") === this.activeTooltip ||
+ relatedTarget?.closest?.(".info-trigger, .warning-trigger") === this.activeTooltip ||
relatedTarget?.closest?.(".tooltip")
) {
return;
@@ -1941,7 +1964,7 @@ class TooltipManager {
handleFocusIn(e) {
if (!e.target || !e.target.closest) return;
- const trigger = e.target.closest(".info-trigger");
+ const trigger = e.target.closest(".info-trigger, .warning-trigger");
if (!trigger) return;
clearTimeout(this.hideTimeout);
@@ -1950,7 +1973,7 @@ class TooltipManager {
handleFocusOut(e) {
if (!e.target || !e.target.closest) return;
- const trigger = e.target.closest(".info-trigger");
+ const trigger = e.target.closest(".info-trigger, .warning-trigger");
if (!trigger) return;
this.hideTimeout = setTimeout(() => {
@@ -1959,7 +1982,7 @@ class TooltipManager {
}
handleTouchClick(e) {
- const trigger = e.target.closest(".info-trigger");
+ const trigger = e.target.closest(".info-trigger, .warning-trigger");
if (trigger) {
e.preventDefault();
@@ -1980,12 +2003,26 @@ class TooltipManager {
}
show(trigger) {
- const termKey = trigger.dataset.term;
- const definition = TERM_DEFINITIONS[termKey];
+ // Check if it's an info trigger or warning trigger
+ const isWarning = trigger.classList.contains("warning-trigger");
+ let definition;
- if (!definition) {
- console.warn(`No definition found for term: ${termKey}`);
- return;
+ if (isWarning) {
+ const warningKey = trigger.dataset.warning;
+ definition = WARNING_DEFINITIONS[warningKey];
+ if (!definition) {
+ console.warn(`No definition found for warning: ${warningKey}`);
+ return;
+ }
+ this.tooltipEl.classList.add("tooltip-warning");
+ } else {
+ const termKey = trigger.dataset.term;
+ definition = TERM_DEFINITIONS[termKey];
+ if (!definition) {
+ console.warn(`No definition found for term: ${termKey}`);
+ return;
+ }
+ this.tooltipEl.classList.remove("tooltip-warning");
}
// Build tooltip content
diff --git a/frontend/index.html b/frontend/index.html
index 3f90f6f..8550644 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -327,10 +327,10 @@
diff --git a/frontend/styles.css b/frontend/styles.css
index 00e907a..fb92688 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -1059,6 +1059,7 @@ body {
}
.modal-header {
+ position: relative;
padding: 2rem 2rem 1rem;
border-bottom: 1px solid var(--border-color);
}
@@ -1069,7 +1070,7 @@ body {
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.5rem;
- padding-right: 3rem;
+ padding-right: 10rem;
}
.modal-meta {
@@ -1088,8 +1089,10 @@ body {
margin-bottom: 0.25rem;
}
-.modal-header .btn {
- margin-top: 1rem;
+.modal-compare-btn {
+ position: absolute;
+ top: 2rem;
+ right: 2rem;
}
.modal-details .modal-age-range {
@@ -1517,6 +1520,62 @@ body {
opacity: 0.8;
}
+/* Warning Trigger Button */
+.warning-trigger {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ margin-left: 0.5rem;
+ background: none;
+ border: none;
+ cursor: help;
+ color: var(--accent-coral);
+ opacity: 0.8;
+ transition: var(--transition);
+ vertical-align: middle;
+ border-radius: 4px;
+}
+
+.warning-trigger:hover,
+.warning-trigger:focus {
+ opacity: 1;
+}
+
+.warning-trigger:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px var(--accent-coral);
+}
+
+.warning-trigger:focus:not(:focus-visible) {
+ box-shadow: none;
+}
+
+.warning-trigger:focus-visible {
+ box-shadow: 0 0 0 2px var(--accent-coral);
+}
+
+/* Warning Icon SVG */
+.warning-icon {
+ width: 14px;
+ height: 14px;
+ flex-shrink: 0;
+}
+
+/* Warning Tooltip Styling */
+.tooltip.tooltip-warning {
+ background: #8b4513;
+ border-left: 3px solid var(--accent-coral);
+}
+
+.tooltip.tooltip-warning[data-placement="top"]::after {
+ border-top-color: #8b4513;
+}
+
+.tooltip.tooltip-warning[data-placement="bottom"]::after {
+ border-bottom-color: #8b4513;
+}
+
/* Label wrapper for inline icon */
.stat-label-with-info {
display: inline-flex;