diff --git a/src/components/SidePanel.tsx b/src/components/SidePanel.tsx index 6417be3..30e0e6d 100644 --- a/src/components/SidePanel.tsx +++ b/src/components/SidePanel.tsx @@ -42,13 +42,21 @@ function TaskComposer({ agentId }: { agentId: string }) { }} />
-
); diff --git a/src/styles.css b/src/styles.css index 15b3056..aed8625 100644 --- a/src/styles.css +++ b/src/styles.css @@ -376,6 +376,60 @@ cursor: pointer; } +/* hover tooltip bubble (data-tip) */ +.tip { + position: relative; +} + +.tip::before { + content: ""; + position: absolute; + bottom: calc(100% + 2px); + left: 24px; + border: 6px solid transparent; + border-top-color: var(--text); + opacity: 0; + transition: opacity 0.15s ease 0.15s; + pointer-events: none; +} + +.tip::after { + content: attr(data-tip); + position: absolute; + bottom: calc(100% + 13px); + left: 0; + width: 230px; + background: var(--text); + color: var(--bg-panel); + font-size: 11px; + font-weight: 500; + line-height: 1.55; + padding: 8px 10px; + border-radius: 9px; + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); + opacity: 0; + transition: opacity 0.15s ease 0.15s; + pointer-events: none; + white-space: normal; + text-align: left; + z-index: 20; +} + +.tip:hover::before, +.tip:hover::after { + opacity: 1; +} + +.task-composer-row .tip::after { + left: auto; + right: 0; +} + +.task-composer-row label.tip::after { + left: 0; + right: auto; +} + .task-composer-row .assign-btn { width: auto; margin-top: 0;