{"id":13809843,"url":"https://github.com/untemps/svelte-use-tooltip","last_synced_at":"2026-04-26T20:00:47.023Z","repository":{"id":41533744,"uuid":"448291476","full_name":"untemps/svelte-use-tooltip","owner":"untemps","description":"Svelte action to display a tooltip","archived":false,"fork":false,"pushed_at":"2026-04-25T15:18:17.000Z","size":1058,"stargazers_count":61,"open_issues_count":15,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-25T15:21:13.872Z","etag":null,"topics":["action","javascript","svelte","svelte-action","tooltip"],"latest_commit_sha":null,"homepage":"https://svelte-use-tooltip.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/untemps.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-01-15T13:53:41.000Z","updated_at":"2026-04-25T14:49:51.000Z","dependencies_parsed_at":"2023-02-18T14:01:14.557Z","dependency_job_id":"0bc14d95-9227-42ea-b13a-58ba88f23746","html_url":"https://github.com/untemps/svelte-use-tooltip","commit_stats":null,"previous_names":[],"tags_count":56,"template":false,"template_full_name":null,"purl":"pkg:github/untemps/svelte-use-tooltip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/untemps%2Fsvelte-use-tooltip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/untemps%2Fsvelte-use-tooltip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/untemps%2Fsvelte-use-tooltip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/untemps%2Fsvelte-use-tooltip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/untemps","download_url":"https://codeload.github.com/untemps/svelte-use-tooltip/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/untemps%2Fsvelte-use-tooltip/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32310804,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T19:15:34.056Z","status":"ssl_error","status_checked_at":"2026-04-26T19:15:15.467Z","response_time":129,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["action","javascript","svelte","svelte-action","tooltip"],"created_at":"2024-08-04T02:00:37.423Z","updated_at":"2026-04-26T20:00:47.013Z","avatar_url":"https://github.com/untemps.png","language":"TypeScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"./assets/svelte-use-tooltip.gif\" alt=\"svelte-use-tooltip\"/\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\n    Svelte action to display a tooltip\n\u003c/h1\u003e\n\n[![npm](https://img.shields.io/npm/v/@untemps/svelte-use-tooltip?style=for-the-badge)](https://www.npmjs.com/package/@untemps/svelte-use-tooltip)\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/untemps/svelte-use-tooltip/publish.yml?style=for-the-badge)](https://github.com/untemps/svelte-use-tooltip/actions)\n[![Codecov](https://img.shields.io/codecov/c/github/untemps/svelte-use-tooltip?style=for-the-badge)](https://codecov.io/gh/untemps/svelte-use-tooltip)\n\n## Demo\n\n\u003cp align=\"center\"\u003e\n    \u003cbig\u003e\u003ca href=\"https://svelte-use-tooltip.vercel.app\" target=\"_blank\" rel=\"noopener\"\u003eLIVE DEMO\u003c/a\u003e\u003c/big\u003e\n\u003c/p\u003e\n\n## Installation\n\n```bash\nnpm i @untemps/svelte-use-tooltip\n```\n\n## Usage\n\n### Basic usage\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { useTooltip } from '@untemps/svelte-use-tooltip';\n\n\tconst _onTooltipClick = (arg: string, event: Event) =\u003e {\n\t\tconsole.log(arg, event);\n\t};\n\u003c/script\u003e\n\n\u003cdiv\n\tuse:useTooltip={{\n\t\tposition: 'right',\n\t\tcontentSelector: '#tooltip-template',\n\t\tcontentActions: {\n\t\t\t'*': {\n\t\t\t\teventType: 'click',\n\t\t\t\tcallback: _onTooltipClick,\n\t\t\t\tcallbackParams: ['ok'],\n\t\t\t\tcloseOnCallback: true\n\t\t\t}\n\t\t},\n\t\tcontainerClassName: `tooltip tooltip-right`,\n\t\tanimated: true,\n\t\tanimationEnterClassName: 'tooltip-enter',\n\t\tanimationLeaveClassName: 'tooltip-leave',\n\t\tenterDelay: 100,\n\t\tleaveDelay: 100,\n\t\toffset: 20\n\t}}\n\tclass=\"target\"\n\u003e\n\tHover me\n\u003c/div\u003e\n\u003ctemplate id=\"tooltip-template\"\u003e\n\t\u003cspan class=\"tooltip__content\"\u003eHi! I'm a \u003ci\u003efancy\u003c/i\u003e \u003cstrong\u003etooltip\u003c/strong\u003e!\u003c/span\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n\t.target {\n\t\twidth: 10rem;\n\t\theight: 3rem;\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tbox-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);\n\t}\n\n\t.target:hover {\n\t\tcursor: pointer;\n\t\tbackground-color: black;\n\t\tcolor: white;\n\t}\n\n\t.tooltip__content {\n\t\tbackground-color: yellow;\n\t\tcolor: black;\n\t}\n\n\t:global(.tooltip) {\n\t\tposition: absolute;\n\t\tz-index: 9999;\n\t\tmax-width: 120px;\n\t\tbackground-color: #ee7008;\n\t\tcolor: #fff;\n\t\ttext-align: center;\n\t\tborder-radius: 6px;\n\t\tpadding: 0.5rem;\n\t}\n\n\t:global(.tooltip::after) {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tmargin-left: -5px;\n\t\tborder-width: 5px;\n\t\tborder-style: solid;\n\t}\n\n\t:global(.tooltip-right::after) {\n\t\ttop: calc(50% - 5px);\n\t\tleft: -5px;\n\t\tborder-color: transparent #ee7008 transparent transparent;\n\t}\n\n\t:global(.tooltip-enter) {\n\t\tanimation: fadeIn 0.2s linear forwards;\n\t}\n\n\t:global(.tooltip-leave) {\n\t\tanimation: fadeOut 0.2s linear forwards;\n\t}\n\n\t@keyframes fadeIn {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateX(50px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateX(0);\n\t\t}\n\t}\n\t@keyframes fadeOut {\n\t\tto {\n\t\t\topacity: 0;\n\t\t\ttransform: translateX(-50px);\n\t\t}\n\t}\n\u003c/style\u003e\n```\n\n## API\n\n| Props                     | Type    | Default             | Description                                                                                                                                                                                                                                                                                                                           |\n| ------------------------- | ------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `content`                 | string  | null                | Text content to display in the tooltip. In development, a `console.warn` is emitted if neither `content` nor `contentSelector` is provided.                                                                                                                                                                                          |\n| `contentSelector`         | string  | null                | Selector of the content to display in the tooltip. Takes precedence over `content` when both are provided. In development, a `console.warn` is emitted if the selector matches no element in the DOM.                                                                                                                                 |\n| `contentActions`          | object  | null                | Configuration of the tooltip actions (see [Content Actions](#content-actions)). Each key is a CSS selector; each value is a `ContentAction` object or an array of `ContentAction` objects, allowing multiple listeners per element. **The special `'*'` key targets the entire tooltip container and works without `contentSelector`. All other keys require `contentSelector` to be set** — if they are provided without it, a `console.warn` is emitted and the non-`'*'` actions are cleared. When set and the tooltip content (pointed to by `contentSelector`) contains focusable elements, the trigger automatically receives `tabindex=\"0\"` (if it does not already have one) so it is reachable via keyboard — Tab focuses the trigger, then Tab again enters the tooltip content. The `tabindex` is removed when `contentActions` is unset or `destroy()` is called. |\n| `containerClassName`      | string  | null                | Class name to apply to the tooltip container. When not set, the tooltip receives the auto-generated classes `__tooltip __tooltip-{position}`.                                                                                                                                                                                         |\n| `position`                | string  | 'top'               | Position of the tooltip. Available values: 'top', 'bottom', 'left', 'right'. If the tooltip would overflow the viewport, it automatically switches to the position with the most available space. For `'left'`/`'right'`, when `width` is `'auto'`, the width shrinks to fit before switching positions (down to a minimum of 80 px). |\n| `animated`                | boolean | false               | Flag to animate tooltip transitions. The default classes `__tooltip-enter` / `__tooltip-leave` (from `useTooltip.css`) are already wrapped in `@media (prefers-reduced-motion: no-preference)`. If you supply custom `animationEnterClassName` / `animationLeaveClassName`, wrap your own keyframes in the same media query. **Do not use `animation: none` for the `reduce` case** — it suppresses `animationend`, causing the tooltip to linger for up to 1 s before the timeout fallback fires. Use `animation-duration: 0.001ms` instead so the event fires immediately. |\n| `animationEnterClassName` | string  | '\\_\\_tooltip-enter' | Class name to apply to the tooltip enter transition.                                                                                                                                                                                                                                                                                  |\n| `animationLeaveClassName` | string  | '\\_\\_tooltip-leave' | Class name to apply to the tooltip leave transition.                                                                                                                                                                                                                                                                                  |\n| `enterDelay`              | number  | 0                   | Delay before showing the tooltip in milliseconds.                                                                                                                                                                                                                                                                                     |\n| `leaveDelay`              | number  | 0                   | Delay before hiding the tooltip in milliseconds.                                                                                                                                                                                                                                                                                      |\n| `onEnter`                 | func    | null                | Callback triggered when the tooltip appears.                                                                                                                                                                                                                                                                                          |\n| `onLeave`                 | func    | null                | Callback triggered when the tooltip disappears.                                                                                                                                                                                                                                                                                       |\n| `offset`                  | number  | 10                  | Distance between the tooltip and the target in pixels. Minimum enforced value is 5.                                                                                                                                                                                                                                                   |\n| `width`                   | string  | 'auto'              | Width of the tooltip. Use `'auto'` to let the tooltip shrink-fit the trigger width, or a CSS size value (e.g. `'200px'`) to allow it to exceed the trigger width.                                                                                                                                                                     |\n| `disabled`                | boolean | false               | Flag to disable the tooltip.                                                                                                                                                                                                                                                                                                          |\n| `open`                    | boolean | undefined           | Programmatically control tooltip visibility. `true` shows the tooltip and locks it open — hover/focus events and Escape are ignored while the lock is active. `false` is a one-shot close: hides the tooltip and immediately releases the lock so hover/focus resumes normally. `undefined` (or not passed) leaves normal hover/focus behavior unchanged. Has no effect when `disabled` is `true`. |\n| `touchBehavior`           | string  | undefined           | Controls how the tooltip responds to touch events. `'hover'` mirrors mouse hover — `touchstart` shows the tooltip and `touchend`/`touchcancel` hide it. `'toggle'` toggles visibility on `touchend` on the target; a `touchstart` anywhere outside the target dismisses it. When not set (default), no touch listeners are registered. |\n| `showOn`                  | string[]| `['mouseenter', 'focusin']` | DOM event types that show the tooltip. Any valid [event type](https://developer.mozilla.org/en-US/docs/Web/Events) can be used (e.g. `['click']` to show on click only). Changing this prop via `update()` replaces the listeners atomically. When an event type appears in both `showOn` and `hideOn`, a single toggle listener is registered instead of separate show/hide ones — first trigger shows, second hides, and so on. |\n| `hideOn`                  | string[]| `['mouseleave', 'focusout']` | DOM event types that hide the tooltip. Pass `[]` to keep the tooltip visible until dismissed by Escape, `open: false`, or programmatic removal. Changing this prop via `update()` replaces the listeners atomically. When an event type appears in both `showOn` and `hideOn`, a single toggle listener is registered instead of separate show/hide ones — first trigger shows, second hides, and so on. |\n| `ariaLabel`               | string  | `'Tooltip'`         | Accessible label for interactive tooltips (`role=\"dialog\"`). Override the default `\"Tooltip\"` value to provide a more descriptive or localized label — screen readers announce this as the dialog name. Has no effect on non-interactive tooltips (`role=\"tooltip\"`). |\n\n### TypeScript\n\nThe package ships TypeScript types. The main types you may need when composing options or building wrappers:\n\n```ts\nimport type {\n\tTooltipOptions,\n\tTooltipPosition,\n\tContentAction,\n\tContentActionValue,\n\tContentActions\n} from '@untemps/svelte-use-tooltip';\n```\n\n### Content and Content Selector\n\nThe tooltip content can be specified either by the `content` prop or the `contentSelector` prop. When both are provided, `contentSelector` takes precedence.\n\n`content` must be a text string that will be displayed as is in the tooltip.\n\nIt's useful for most of the use cases of a tooltip however sometimes you need to display some more complex content, with interactive elements or formatted text.\n\nTo do so, you may use the `contentSelector` prop that allows to specify the selector of an element from the DOM.\n\nThe best option is to use a [template](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) HTML element although you may also use a plain element. In this case, **it will remain in the DOM and will be cloned in the tooltip**.\n\n### Content Actions\n\nThe `contentActions` prop allows to handle interactions within the tooltip content.\n\nEach element inside the content parent may configure its own action since it can be queried using the key-selector.\n\nEach value in the `contentActions` object can be either a single action object (`ContentAction`) or an array of action objects (`ContentAction[]`), allowing you to attach multiple events to the same element.\n\n\u003e **Note:** All selector keys except `'*'` require `contentSelector` to be set. If non-`'*'` keys are provided without a `contentSelector`, a `console.warn` is emitted and those actions are cleared. The `'*'` key (whole-tooltip listener) works without `contentSelector`.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { useTooltip } from '@untemps/svelte-use-tooltip';\n\u003c/script\u003e\n\n\u003cdiv\n\tuse:useTooltip={{\n\t\tcontentSelector: '#content',\n\t\tcontentActions: {\n\t\t\t'#button1': {\n\t\t\t\teventType: 'mouseenter',\n\t\t\t\tcallback: (arg) =\u003e console.log(arg),\n\t\t\t\tcallbackParams: [\"Haha you're hovering the button 1\"],\n\t\t\t\tcloseOnCallback: false\n\t\t\t},\n\t\t\t'#button2': {\n\t\t\t\teventType: 'click',\n\t\t\t\tcallback: (arg1, arg2) =\u003e console.log(arg1, arg2),\n\t\t\t\tcallbackParams: [\"Haha you've clicked the\", 'button 2'],\n\t\t\t\tcloseOnCallback: true\n\t\t\t}\n\t\t}\n\t}}\n\u003e\n\tHover me\n\u003c/div\u003e\n\u003cspan id=\"content\"\u003e\n\t\u003cbutton id=\"button1\"\u003eAction 1\u003c/button\u003e\n\t\u003cbutton id=\"button2\"\u003eAction 2\u003c/button\u003e\n\u003c/span\u003e\n```\n\n| Props             | Type     | Default | Description                                                                                              |\n| ----------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------- |\n| `eventType`       | string   | null    | Type of the event. All available [events](https://developer.mozilla.org/fr/docs/Web/Events) can be used. |\n| `callback`        | function | null    | Function to be used as event handler. The callback always receives the items of `callbackParams` as leading arguments, followed by the native `Event` object as the last argument: `callback(...callbackParams, event)`. Use `event.target` or `event.currentTarget` to identify the element that triggered the interaction. |\n| `callbackParams`  | array    | null    | List of arguments to pass to the event handler as leading arguments, before the native `Event` object.   |\n| `closeOnCallback` | boolean  | false   | Flag to automatically close the tooltip when the event handler is triggered.                             |\n\n#### Multiple events per element\n\nPass an array of action objects to attach multiple listeners to the same element:\n\n```svelte\n\u003cdiv\n\tuse:useTooltip={{\n\t\tcontentSelector: '#content',\n\t\tcontentActions: {\n\t\t\t'#button1': [\n\t\t\t\t{\n\t\t\t\t\teventType: 'click',\n\t\t\t\t\tcallback: (arg) =\u003e console.log('clicked', arg),\n\t\t\t\t\tcallbackParams: ['button 1'],\n\t\t\t\t\tcloseOnCallback: true\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\teventType: 'mouseenter',\n\t\t\t\t\tcallback: () =\u003e console.log('hovered button 1')\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}}\n\u003e\n\tHover me\n\u003c/div\u003e\n\u003cspan id=\"content\"\u003e\n\t\u003cbutton id=\"button1\"\u003eAction 1\u003c/button\u003e\n\u003c/span\u003e\n```\n\nAll listeners attached this way are automatically removed when the tooltip is hidden or destroyed.\n\n#### `*` selector\n\nIf you need the whole tooltip content to be interactive, you can use the special `*` key:\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { useTooltip } from '@untemps/svelte-use-tooltip';\n\u003c/script\u003e\n\n\u003cdiv\n\tuse:useTooltip={{\n\t\tcontent: 'Foo',\n\t\tcontentActions: {\n\t\t\t'*': {\n\t\t\t\teventType: 'click',\n\t\t\t\tcallback: (arg) =\u003e console.log(arg),\n\t\t\t\tcallbackParams: ['Haha you clicked the tooltip'],\n\t\t\t\tcloseOnCallback: true\n\t\t\t}\n\t\t}\n\t}}\n\u003e\n\tHover me\n\u003c/div\u003e\n```\n\nIf you combine the `*` selector with other events, its callback will be triggered along with the other ones.\n\n## Development\n\nThe component can be served for development purpose on `http://localhost:5173/` running:\n\n```bash\nyarn dev\n```\n\n## Contributing\n\nContributions are warmly welcomed:\n\n- Fork the repository\n- Create a feature branch\n- Develop the feature AND write the tests (or write the tests AND develop the feature)\n- Commit your changes using [Conventional Commits](https://www.conventionalcommits.org/) with sentence-case subject (e.g. `feat: Add offset prop`)\n- Submit a Pull Request\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funtemps%2Fsvelte-use-tooltip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funtemps%2Fsvelte-use-tooltip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funtemps%2Fsvelte-use-tooltip/lists"}