Skip to content

docs: add hover card / tooltip example to eventMouseEnter#249

Open
kenlyle2 wants to merge 1 commit into
fullcalendar:mainfrom
kenlyle2:main
Open

docs: add hover card / tooltip example to eventMouseEnter#249
kenlyle2 wants to merge 1 commit into
fullcalendar:mainfrom
kenlyle2:main

Conversation

@kenlyle2

Copy link
Copy Markdown

Closes fullcalendar/fullcalendar#5517

What this adds

A Hover Card / Tooltip (no external library) section to eventMouseEnter.md covering:

  • Vanilla JS implementation using getBoundingClientRect() + position: fixed
  • The 120 ms hide delay pattern that lets the cursor travel from the event pill to the card without it disappearing mid-transit
  • Viewport collision detection (horizontal flip + vertical clamp)
  • Abbreviated React example using useState + useRef for the same pattern

Why no library

Third-party tooltip libraries (Tooltip.js, Tippy.js) expect to own the DOM lifecycle of their anchor element. FullCalendar re-renders event elements on navigation, which breaks most library attachment strategies. The position: fixed + state approach sidesteps this entirely and has zero additional dependencies.

This pattern is running in production at PostGlider, a social-media scheduling app built on Next.js + FullCalendar v6, across both month and week views.

Related

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update tooltip demo in docs to use a current library

1 participant