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>
56 lines
3.0 KiB
Markdown
56 lines
3.0 KiB
Markdown
Floating Tooltip
|
|
==============
|
|
|
|
[![NPM package][npm-img]][npm-url]
|
|
[![Build Size][build-size-img]][build-size-url]
|
|
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]
|
|
|
|
A floating tooltip JS component.
|
|
|
|
## Quick start
|
|
|
|
```js
|
|
import Tooltip from 'float-tooltip';
|
|
```
|
|
or using a *script* tag
|
|
```html
|
|
<script src="//cdn.jsdelivr.net/npm/float-tooltip"></script>
|
|
```
|
|
then
|
|
```js
|
|
const myTooltip = new Tooltip(<triggerDOMElement>)
|
|
.content('<div>Hello World!</div>');
|
|
```
|
|
|
|
## API reference
|
|
|
|
### Initialisation
|
|
|
|
```js
|
|
new Tooltip(<containerDomElement>, { configOptions })
|
|
```
|
|
|
|
| Config options | Description | Default |
|
|
| --- | --- | :--: |
|
|
| <b>style</b>: <i>object</i> | A custom style object apply to the tooltip and override the default style. | - |
|
|
|
|
|
|
### Methods
|
|
|
|
| Method | Description | Default |
|
|
| --- | --- |---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
| <b>content</b>([<i>string | HTMLElement</i>]) | Specify the content of the tooltip. Supports plain text, HTML string content, an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) or [React JSX](https://react.dev/learn/writing-markup-with-jsx). If a falsy value is supplied the tooltip will automatically hide. | `false` |
|
|
| <b>offsetX</b>([<i>number</i>]) | 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. | - |
|
|
| <b>offsetY</b>([<i>number</i>]) | 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
|
|
|
|
[](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=url) If this project has helped you and you'd like to contribute back, you can always [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=url)!
|
|
|
|
[npm-img]: https://img.shields.io/npm/v/float-tooltip
|
|
[npm-url]: https://npmjs.org/package/float-tooltip
|
|
[build-size-img]: https://img.shields.io/bundlephobia/minzip/float-tooltip
|
|
[build-size-url]: https://bundlephobia.com/result?p=float-tooltip
|
|
[npm-downloads-img]: https://img.shields.io/npm/dt/float-tooltip
|
|
[npm-downloads-url]: https://www.npmtrends.com/float-tooltip
|