f1d51b8cc8
- Foldable left panel (user profile) and right panel (task details) - Clicking a task in the list or graph node selects it and shows details - Both views (task list + graph) always mounted via absolute inset-0 for correct canvas dimensions; tabs toggle visibility with opacity - Graph node selection animation: other nodes repel outward (charge -600), then selected node smoothly slides to center (500ms cubic ease-out), then charge restores to -120 and graph stabilizes - Graph re-fits on tab switch and panel resize via ResizeObserver - Fix UUID string IDs throughout (backend returns UUIDs, not integers) - Add TaskDetailPanel, UserPanel components - Add CLAUDE.md project documentation Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
3.0 KiB
3.0 KiB
Floating Tooltip
A floating tooltip JS component.
Quick start
import Tooltip from 'float-tooltip';
or using a script tag
<script src="//cdn.jsdelivr.net/npm/float-tooltip"></script>
then
const myTooltip = new Tooltip(<triggerDOMElement>)
.content('<div>Hello World!</div>');
API reference
Initialisation
new Tooltip(<containerDomElement>, { configOptions })
| Config options | Description | Default |
|---|---|---|
| style: object | A custom style object apply to the tooltip and override the default style. | - |
Methods
| Method | Description | Default |
|---|---|---|
| content([string | HTMLElement]) | Specify the content of the tooltip. Supports plain text, HTML string content, an HTML element or React JSX. If a falsy value is supplied the tooltip will automatically hide. |
| offsetX([number]) | The amount of pixels to offset the tooltip horizontally from its center position relative to the pointer. If a null value is specified (default) the offset will be automatically calculated and gradually shifted so it remains horizontally inside the parent element. |
- |
| offsetY([number]) | The amount of pixels to offset the tooltip vertically relative to the pointer. A negative value will shift the tooltip to be above the pointer. If a null value is specified (default) the tooltip will be flipped above when the pointer is near the bottom, so it remains vertically inside the parent element. |
- |
Giving Back
If this project has helped you and you'd like to contribute back, you can always buy me a ☕!