Add TooltipHoverCard component#24
Conversation
Generated component following the Webflow code components scaffold pattern. Includes full and simple prop surface variations.
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Caution Review the following alerts detected in dependencies. According to your organization's Security Policy, you must resolve all "Block" alerts before proceeding. It is recommended to resolve "Warn" alerts too. Learn more about Socket for GitHub.
|
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Multiple compounding problems kept the tooltip invisible in the Webflow
canvas:
- position: fixed + getBoundingClientRect put the tooltip at viewport
coordinates, but Webflow renders components inside Shadow DOM inside
an iframe, and any transformed ancestor changes the containing block
for fixed-positioned children. Net effect: the tooltip rendered, but
often well off-screen relative to the visible canvas.
- cardImage typed as string, but props.Image returns {src, alt} — the
<img src={cardImage}> produced [object Object] as the URL.
- cardDescription fed to dangerouslySetInnerHTML — Webflow's RichText
runtime value is a React slot element, not an HTML string, so __html
received an object and rendered nothing.
- cardDescription had no defaultValue, so the slot was empty out of the
box.
Rewrite:
- Drop position: fixed and the JS position/arrow math entirely. The
wrapper is now position: relative and the content uses position:
absolute with CSS placement classes (top / bottom / left / right),
sized to the wrapper's own box. No more viewport-coordinate drift.
- Keep auto-flip with a much smaller effect: when visible, measure
overflow against the viewport and swap the placement class if
needed — no continuous resize/scroll listeners.
- Retype cardImage as PropValues[PropType.Image] and render
cardImage.src / cardImage.alt.
- Retype cardDescription as React.ReactNode and render it with
{cardDescription}; add a plain-text defaultValue on the RichText
prop so the card isn't blank by default.
- Re-derive the arrow from the content's background via a rotated
square so it inherits theme colors automatically — no more
per-theme, per-placement border-color rules.
- Hover card mode keeps pointer-events on the content so users can
click links and interact; tooltip mode keeps pointer-events: none.
- Move the outer-hover handlers onto the wrapper for hoverCard mode so
the card stays open while moving between trigger and card.
Also: vite/client types in tsconfig for *.css type-checking, and
update main.tsx's cardImage to the object shape.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Conditionally rendering with {isVisible && <content>} was remounting the
content every open, which (combined with the mount-time CSS animation
and the mouseenter/leave split across trigger button and wrapper) left
subsequent hovers in a state where the state toggled but the content
didn't visibly appear. Two changes:
- Always render the content, toggle visibility with a single
wf-tooltiphovercard--open class on the wrapper and an opacity +
visibility transition on the content. No remounting, animation stays
intact on every open.
- Consolidate hover handling on the wrapper only. That handles both
tooltip and hoverCard modes uniformly, and fixes the hoverCard mode
case where moving the cursor from the trigger button onto the card
(sibling, not child) was firing the button's mouseleave and hiding
the card mid-transit. Small 120ms hide grace period in hoverCard
mode lets the cursor cross the gap between trigger and card without
the card collapsing.
Also split the single timeoutRef into show/hide refs so a scheduled
show and a scheduled hide can't stomp on each other.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 participant
Component: TooltipHoverCard
Description
A versatile tooltip and hover card component that displays contextual information when hovering over or focusing on a trigger element. Supports two modes: simple plain text tooltips and rich hover cards with title, description, and optional image. Features configurable placement (top, bottom, left, right) with automatic viewport edge detection and flip behavior. Includes a visual arrow pointer that dynamically adjusts to point at the trigger element. Appears after a configurable hover delay and smoothly fades in/out with CSS transitions. Fully keyboard accessible with focus state support for screen readers and keyboard navigation.
What's Included
var(--background-primary, #ffffff), etc.font-family: inherit; color: inherit;TooltipHoverCard.webflow.tsx) — 20+ props for developers/agenciesTooltipHoverCardSimple.webflow.tsx) — core text/link props for clientswf-tooltip-hover-card-for Shadow DOM safetyTesting
npm install && npm run devruns locallynpx webflow library shareimports successfully