{"id":21525843,"url":"https://github.com/bkwld/vue-tooltip","last_synced_at":"2025-03-17T18:19:58.878Z","repository":{"id":146043544,"uuid":"493406276","full_name":"BKWLD/vue-tooltip","owner":"BKWLD","description":null,"archived":false,"fork":false,"pushed_at":"2022-06-10T20:44:34.000Z","size":280,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-05T10:02:06.535Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/BKWLD.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2022-05-17T20:36:54.000Z","updated_at":"2022-05-17T20:43:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"e804bca7-3f31-4bb6-bebe-ce089beabeb9","html_url":"https://github.com/BKWLD/vue-tooltip","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-tooltip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-tooltip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-tooltip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-tooltip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BKWLD","download_url":"https://codeload.github.com/BKWLD/vue-tooltip/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244085008,"owners_count":20395523,"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":[],"created_at":"2024-11-24T01:38:39.851Z","updated_at":"2025-03-17T18:19:58.873Z","avatar_url":"https://github.com/BKWLD.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Tooltip\n\nA component that renders a `button.tooltip-btn`.  Clicking the button reveals a floating `.tooltip-panel` with the slotted contents positioned with [Floating UI](https://floating-ui.com/).\n\n## Props\n\n* `placement`: Tooltip panel's placement relative to the tooltip button.  Can be \"top\", \"bottom\", \"left\", \"right\".  Optionally append any value with \"-start\" or \"-end\".  Default: \"right-start\"\n* [offset](https://floating-ui.com/docs/offset): Number.  Pixel distance between .tooltip-btn and .tooltip-panel.  Default: 10. \n* `ariaLabel`: Determines .tooltip-btn's aria-label attribute.  Default: \"More Information\"\n* `openOnMount`: When true, tooltip is open on mount. Default: false. \n* `transition`: String.  Override the `.tooltip-panel` vue transition. Default: \"panel\".\n* [autoUpdate](https://floating-ui.com/docs/autoUpdate): Boolean.  Adds scroll and resize listeners that will attempt to re-position the tooltip panel so that it doesn't go off the viewport edges.  Default: `true`.\n* [flip](https://floating-ui.com/docs/flip): True, false, or [options](https://floating-ui.com/docs/flip#options) object. \n\n## Usage (Simple)\n\nImport the component and styles:\n```coffee\nimport '@bkwld/vue-tooltip/index.css'\nimport VueTooltip from '@bkwld/vue-tooltip'\nexport default\n\tcomponents: { VueTooltip }\n```\n\nAdd the tooltip:\n```pug\n# Renders a \"?\" tooltip button after the text\nh2 Under construction\n  vue-tooltip New website coming soon\n\n# With a bigger tooltip panel\nh2 Under Construction\n  vue-tooltip\n    .title Construction timeline\n    .body We'll be done soon\n    nuxt-link(to='/timeline') Learn More\n```\n\n## Usage (Skinned)\n\nOne way to skin VueTooltip is to wrap it in a custom component:\n\nwelcome-tooltip.vue\n```pug\nvue-tooltip(:offset='25')\n\n  //- Override what's inside .tooltip-btn\n  template(#button) {{ buttonText }}\n\n  //- Passthru slot contents\n  template(#default) slot\n\n//- Add custom styles\n//- .tooltip-btn\n//- \u003e\u003e\u003e .tooltip-panel\n//- ...\n```\n\nThen use it:\n```pug\n# Renders a \"Why?\" tooltip button after the text\nh2 Under construction\n  welcome-tooltip(button-text='Why?') To serve you better\n```\n\n## Usage (CSS overrides)\n\nYou can also just add style overrides:\n\ndefaults.styl\n```styl\n.tooltip-btn\n  // ...\n\n.tooltip-btn-icon\n  // ...\n\n.tooltip-panel\n  // ...\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkwld%2Fvue-tooltip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbkwld%2Fvue-tooltip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkwld%2Fvue-tooltip/lists"}