{"id":19606325,"url":"https://github.com/svelte-plugins/tooltips","last_synced_at":"2025-04-04T10:08:35.090Z","repository":{"id":58279419,"uuid":"527369120","full_name":"svelte-plugins/tooltips","owner":"svelte-plugins","description":"A simple tooltip action and component designed for Svelte.","archived":false,"fork":false,"pushed_at":"2025-02-08T04:15:31.000Z","size":10515,"stargazers_count":70,"open_issues_count":3,"forks_count":11,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T09:08:46.504Z","etag":null,"topics":["action","components","javascript","svelte","sveltejs","tooltip","tooltips"],"latest_commit_sha":null,"homepage":"https://svelte-plugins.github.io/tooltips","language":"Svelte","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/svelte-plugins.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-22T01:14:25.000Z","updated_at":"2025-03-21T04:34:42.000Z","dependencies_parsed_at":"2023-11-23T00:25:50.760Z","dependency_job_id":"7d3cc119-9c77-4e24-a6f9-f6ac126028b8","html_url":"https://github.com/svelte-plugins/tooltips","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svelte-plugins%2Ftooltips","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svelte-plugins%2Ftooltips/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svelte-plugins%2Ftooltips/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svelte-plugins%2Ftooltips/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svelte-plugins","download_url":"https://codeload.github.com/svelte-plugins/tooltips/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247157283,"owners_count":20893220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","components","javascript","svelte","sveltejs","tooltip","tooltips"],"created_at":"2024-11-11T10:04:43.684Z","updated_at":"2025-04-04T10:08:35.056Z","avatar_url":"https://github.com/svelte-plugins.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @svelte-plugins/tooltips\n\nA simple tooltip action and component designed for Svelte.\n\nTry it in the [Svelte REPL](https://svelte.dev/repl/e63e262a91834400aa567b9b0d20675a?version=3.49.0).\n\n## Svelte 5\nTo install the Svelte 5 version you need to use the `beta` package.\n\n```bash\nyarn add @svelte-plugins/tooltips@beta\n\n# or with NPM\n\nnpm i @svelte-plugins/tooltips@beta\n\n# or with PNPM\n\npnpm i @svelte-plugins/tooltips@beta\n```\n\n## Install\n\n```bash\nyarn add @svelte-plugins/tooltips\n\n# or with NPM\n\nnpm i @svelte-plugins/tooltips\n\n# or with PNPM\n\npnpm i @svelte-plugins/tooltips\n```\n\n## Using the Tooltip component\n```svelte\n\u003cscript\u003e\n  import { Tooltip } from \"@svelte-plugins/tooltips\";\n\u003c/script\u003e\n\n\u003cTooltip content=\"Hello world!\"\u003e\n Check out my tooltip\n\u003c/Tooltip\u003e\n```\n\n## Using the Tooltip action\n\n```svelte\n\u003cscript\u003e\n  import { tooltip } from \"@svelte-plugins/tooltips\";\n\u003c/script\u003e\n\nCheckout out my \u003cu title=\"Hello World!\" use:tooltip\u003etooltip\u003c/u\u003e\n\nCheckout out my \u003cu use:tooltip={{ content: 'Hello World!' }}\u003etooltip\u003c/u\u003e\n```\n\n## API\n\n### Props\n| Prop               | Description                                                         | Value                                         |\n| :----------------- | :------------------------------------------------------------------ | :---------------------------------------------- |\n| action             | The action that triggers the tooltip (hover | click | prop)         | `string` (default: `hover`)                     |\n| animation          | The animation to apply to the tooltip                               | `string` (default: ``)                          |\n| arrow              | If `false`, the tooltip arrow will not be shown.                    | `boolean` (default: `true`)                     |\n| autoPosition       | Adjust tooltip position if viewport clipping occurs                 | `boolean` (default: `false`)                    |\n| content            | The string or object containing componentref and props              | `string` | `object` component (default: ``)     |\n| delay              | The animation delay in milliseconds to apply to the tooltip         | `number` (default: `200`)                       |\n| hideOnClickOutside | Hides a tooltip when an outside click occurs                        | `boolean` (default: `false`)                    |\n| maxWidth           | The max allowable width of the tooltip content                      | `number` (default: `200`)                       |\n| position           | The position where the tooltip should appear relative to its parent | `string` (default: `top`)                       |\n| show               | Allows you to manually control the tooltip visibility               | `boolean` (default: `false`)                    |\n| style              | The object containing theme variable overrides                      | `object` (default: `null`)                      |\n| theme              | The CSS theme class name                                            | `string` (default: ``)                          |\n\n#### Using components as content\n| Prop              | Description                                                          | Value                                           |\n| :-----------------| :------------------------------------------------------------------- | :---------------------------------------------- |\n| content.component | Svelte component                                                     | `component` (default: `null`)                   |\n| content.props     | Any component propeties                                              | `object` (default: `null`)                      |\n\n\n```svelte\n\u003cscript\u003e\n  import ComponentAsTooltip from './ComponentAsTooltip';\n\u003c/script\u003e\n\nCheckout out my \u003cspan use:tooltip={{ content: { component: ComponentAsTooltip, props: { title: 'Hello World!' } } }}\u003etooltip\u003c/span\u003e\n```\n\n## Theming\nYou can customize tooltips theme using several methods:\n- Assign a theme class name via the `theme` property that includes all of your CSS variables overrides\n- Define the overrides directly using the `style` property\n- Override the CSS variables globally\n\nTooltip CSS variables:\n\n```css\n--tooltip-arrow-size: 10px;\n--tooltip-background-color: rgba(0, 0, 0, 0.9);\n--tooltip-border-radius: 4px;\n--tooltip-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);\n--tooltip-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,\n  'Helvetica Neue', sans-serif;\n--tooltip-font-size: 14px;\n--tooltip-font-weight: 500;\n--tooltip-line-height: 1.25rem;\n--tooltip-color: #fff;\n--tooltip-offset-x: 12px;\n--tooltip-offset-y: 12px;\n--tooltip-padding: 12px;\n--tooltip-white-space-hidden: nowrap;\n--tooltip-white-space-shown: normal;\n--tooltip-z-index: 100;\n```\n\n### Using the theme property\n\n```svelte\n// action\n\u003cspan title=\"hello world!\" use:tooltip={{ theme: 'custom-tooltip' }}\u003eHover over me\u003c/span\u003e\n\n// component\n\u003cTooltip content=\"hello world!\" theme=\"custom-tooltip\"\u003eHover over me\u003c/Tooltip\u003e\n\n\u003cstyle\u003e\n  :global(.tooltip.custom-tooltip) {\n    --tooltip-background-color: hotpink;\n    --tooltip-box-shadow: 0 1px 8px pink;\n  }\n\u003c/style\u003e\n```\n\n### Using the style property\n```svelte\n// action\n\u003cspan title=\"hello world!\" use:tooltip={{ style: { backgroundColor: 'blue', borderRadius: '10px' } }}\u003eHover over me\u003c/span\u003e\n\n// component\n\u003cTooltip content=\"hello world!\" style={{ style: { backgroundColor: 'blue' } }}\u003eHover over me\u003c/Tooltip\u003e\n```\n\n## Changelog\n\n[Changelog](CHANGELOG.md)\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvelte-plugins%2Ftooltips","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvelte-plugins%2Ftooltips","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvelte-plugins%2Ftooltips/lists"}