{"_id":"@affino/tooltip-vue","_rev":"2-e56290d6d0e23d4715f6d072d3629e3b","name":"@affino/tooltip-vue","dist-tags":{"alpha":"0.1.0-alpha.1","latest":"1.0.0"},"versions":{"0.1.0-alpha.1":{"name":"@affino/tooltip-vue","version":"0.1.0-alpha.1","keywords":["vue","tooltip","headless","ui","surface","controller"],"author":{"name":"Anton Pavlov","email":"a.pavlov@affino.dev"},"license":"MIT","_id":"@affino/tooltip-vue@0.1.0-alpha.1","maintainers":[{"name":"affino","email":"anton.pavlov.personal@gmail.com"}],"homepage":"https://affino.dev","bugs":{"url":"https://github.com/affinio/affinio/issues"},"dist":{"shasum":"6d0a38ce1c3e503977b69e0af9406a3aed5ce70b","tarball":"https://registry.npmjs.org/@affino/tooltip-vue/-/tooltip-vue-0.1.0-alpha.1.tgz","fileCount":12,"integrity":"sha512-gDJDvrPCBld939JpF4t/bxizvIwzEOodV8Ydtx0j9T2eloHwoB4ojT86ngUp/EV+Swd21mp3UMumsT7M6Dq6eg==","signatures":[{"sig":"MEUCIQCsAaBh+xv2QxX1A6+fx+JJvoo6b1TSrtw1THp2P+izrQIgYZH+hNzdntzRVyWalqFQ0PmwWpaiLe9Ugtb4/aJCyCg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13767},"main":"dist/index.js","type":"module","_from":"file:affino-tooltip-vue-0.1.0-alpha.1.tgz","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"test":"vitest run","build":"tsc -p tsconfig.json"},"_npmUser":{"name":"affino","email":"anton.pavlov.personal@gmail.com"},"_resolved":"/tmp/4cefc3e95c14207e275f54ae93913273/affino-tooltip-vue-0.1.0-alpha.1.tgz","_integrity":"sha512-gDJDvrPCBld939JpF4t/bxizvIwzEOodV8Ydtx0j9T2eloHwoB4ojT86ngUp/EV+Swd21mp3UMumsT7M6Dq6eg==","repository":{"url":"git+https://github.com/affinio/affinio.git#main","type":"git"},"_npmVersion":"10.8.2","description":"Vue 3 composables for the @affino/tooltip-core controller","directories":{},"sideEffects":false,"_nodeVersion":"20.19.6","dependencies":{"@affino/tooltip-core":"^0.1.0-alpha.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.0"},"peerDependencies":{"vue":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/tooltip-vue_0.1.0-alpha.1_1768945153560_0.0027887879657588766","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@affino/tooltip-vue","version":"1.0.0","author":{"name":"Anton Pavlov","email":"a.pavlov@affino.dev"},"type":"module","description":"Vue 3 composables for the @affino/tooltip-core controller","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"main":"dist/index.js","types":"dist/index.d.ts","sideEffects":false,"peerDependencies":{"vue":"^3.3.0"},"dependencies":{"@affino/overlay-host":"^1.0.0","@affino/tooltip-core":"^1.0.0"},"devDependencies":{"vue":"^3.3.0"},"repository":{"type":"git","url":"git+https://github.com/affinio/affinio.git#main"},"homepage":"https://affino.dev","keywords":["vue","tooltip","headless","ui","surface","controller"],"license":"MIT","scripts":{"build":"tsc --build tsconfig.json","test":"vitest run"},"_id":"@affino/tooltip-vue@1.0.0","bugs":{"url":"https://github.com/affinio/affinio/issues"},"_integrity":"sha512-PbRciAFOercOUYjiZH56XA0IXhzuOxigQsfvmzD9xosz9p2sVCcpMe95q0pnxJodbr4CtsarYC6XSC4saML7ow==","_resolved":"/tmp/4d5590c374102abc2733ab87c33880d9/affino-tooltip-vue-1.0.0.tgz","_from":"file:affino-tooltip-vue-1.0.0.tgz","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-PbRciAFOercOUYjiZH56XA0IXhzuOxigQsfvmzD9xosz9p2sVCcpMe95q0pnxJodbr4CtsarYC6XSC4saML7ow==","shasum":"6e1b2688a4de05bf36da956dc981d67ca0250784","tarball":"https://registry.npmjs.org/@affino/tooltip-vue/-/tooltip-vue-1.0.0.tgz","fileCount":12,"unpackedSize":18223,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHGbpc3vwGUDQQ5V7bF7FsL/eycdIaYhxrDe+6cdfjS1AiBMGMIKQVLlCEAxQsPckeu1KaPkt3Gc2O7E3bb+58Z4Rw=="}]},"_npmUser":{"name":"affino","email":"anton.pavlov.personal@gmail.com"},"directories":{},"maintainers":[{"name":"affino","email":"anton.pavlov.personal@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tooltip-vue_1.0.0_1769943483221_0.6172720154961924"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-20T21:39:13.459Z","modified":"2026-02-01T10:58:03.500Z","0.1.0-alpha.1":"2026-01-20T21:39:13.699Z","1.0.0":"2026-02-01T10:58:03.386Z"},"bugs":{"url":"https://github.com/affinio/affinio/issues"},"author":{"name":"Anton Pavlov","email":"a.pavlov@affino.dev"},"license":"MIT","homepage":"https://affino.dev","keywords":["vue","tooltip","headless","ui","surface","controller"],"repository":{"type":"git","url":"git+https://github.com/affinio/affinio.git#main"},"description":"Vue 3 composables for the @affino/tooltip-core controller","maintainers":[{"name":"affino","email":"anton.pavlov.personal@gmail.com"}],"readme":"# @affino/tooltip-vue\n\nRenderless Vue 3 helpers that wrap `@affino/tooltip-core`. Keep your own DOM/markup and let the controller manage timers, ARIA wiring, and hover/focus semantics.\n\n## Installation\n\n```bash\npnpm add @affino/tooltip-vue\n# or\nnpm install @affino/tooltip-vue\n```\n\n## Basic usage\n\n```vue\n<script setup lang=\"ts\">\nimport { useTooltipController } from \"@affino/tooltip-vue\"\n\nconst controller = useTooltipController({ id: \"sla-tooltip\", openDelay: 120 })\nconst triggerProps = controller.getTriggerProps()\nconst tooltipProps = controller.getTooltipProps()\n</script>\n\n<template>\n\t<button class=\"Trigger\" v-bind=\"triggerProps\">\n\t\tInspect SLA\n\t</button>\n\n\t<transition name=\"fade\">\n\t\t<div v-if=\"controller.state.value.open\" class=\"Tooltip\" v-bind=\"tooltipProps\">\n\t\t\t<p>Always-on support across 11 regions.</p>\n\t\t</div>\n\t</transition>\n</template>\n```\n\nThe props already include lowercase `onpointerenter/onpointerleave` handlers so they work directly with `v-bind`.\n\n## Positioning (recommended)\n\nMost layouts can rely on the built-in floating adapter, which wires `TooltipCore.computePosition()` to Vue refs:\n\n```vue\n<script setup lang=\"ts\">\nimport { useTooltipController, useFloatingTooltip } from \"@affino/tooltip-vue\"\n\nconst controller = useTooltipController({ id: \"sla-tooltip\" })\nconst floating = useFloatingTooltip(controller, {\n\tplacement: \"top\",\n\talign: \"center\",\n\tgutter: 12,\n\tarrow: { size: 10 },\n})\n</script>\n\n<template>\n\t<button ref=\"floating.triggerRef\" v-bind=\"controller.getTriggerProps()\">\n\t\tInspect SLA\n\t</button>\n\n\t<Teleport :to=\"floating.teleportTarget\">\n\t\t<div\n\t\t\tv-if=\"controller.state.value.open\"\n\t\t\tref=\"floating.tooltipRef\"\n\t\t\tclass=\"Tooltip\"\n\t\t\tv-bind=\"controller.getTooltipProps()\"\n\t\t\t:style=\"floating.tooltipStyle\"\n\t\t>\n\t\t\t<span v-if=\"floating.arrowProps\" class=\"TooltipArrow\" v-bind=\"floating.arrowProps\" :style=\"floating.arrowProps.style\" />\n\t\t\t<p>Always-on support across 11 regions.</p>\n\t\t</div>\n\t</Teleport>\n</template>\n```\n\nThe helper exposes `triggerRef`, `tooltipRef`, `tooltipStyle`, `teleportTarget`, `arrowProps`, and `updatePosition()` so you\ncan react to custom layout changes (portals, drawers, etc.) while keeping every tooltip inside the shared overlay host by\ndefault.\n\n### Layering inside modals or drawers\n\n`useFloatingTooltip` automatically teleports into a singleton host (`#affino-tooltip-host`) so multiple tooltips can share the same stacking context. You can override both the Teleport target and the applied `z-index` when a modal, drawer, or sheet needs stricter layering:\n\n```vue\nconst {\n\ttriggerRef,\n\ttooltipRef,\n\ttooltipStyle,\n\tteleportTarget,\n} = useFloatingTooltip(controller, {\n\tteleportTo: '#my-dialog-overlay',\n\tzIndex: 120,\n})\n```\n\n- Pass a CSS selector, HTMLElement, or `false` via `teleportTo` if you want to keep the tooltip inside a scoped overlay.\n- Use the `zIndex` option to pin the bubble above scroll locks or dialog chrome without reaching into the generated styles manually.\n- Call `floating.updatePosition()` after animations or layout changes so the inline positioning stays in sync.\n\n## Controller API\n\n| Method | Description |\n| --- | --- |\n| `controller.state` | `ShallowRef<TooltipState>` updated whenever the surface opens or closes. |\n| `controller.getTriggerProps(options?)` | Returns id/ARIA/pointer/focus handlers with optional `aria-describedby` overrides. |\n| `controller.getTooltipProps()` | Returns attributes for the floating surface, including `data-state`. |\n| `controller.getDescriptionProps(options?)` | Produces a live-region description node you can attach to form fields. |\n| `controller.open(reason?)` / `close(reason?)` / `toggle()` | Imperative controls for advanced flows. |\n| `controller.dispose()` | Tears down timers + subscriptions (auto-called when the component unmounts).\n\n## Working with forms\n\nTooltips often decorate input labels. Blend focus-driven logic with pointer helpers:\n\n```vue\n<label class=\"FieldLabel\">\n\tWork email\n\t<button type=\"button\" class=\"Help\" v-bind=\"triggerProps\">?</button>\n</label>\n\n<input @focus=\"controller.open('keyboard')\" @blur=\"controller.close('keyboard')\" />\n```\n\nBecause the controller reuses `@affino/surface-core`, its timers match menus and other floating primitives in the Affino stack.\n\n### Announcing validation or hints\n\nCompose live regions by combining `getTriggerProps({ describedBy })` with `getDescriptionProps`:\n\n```vue\n<script setup lang=\"ts\">\nimport { useTooltipController } from \"@affino/tooltip-vue\"\n\nconst controller = useTooltipController({ id: \"field-tooltip\" })\nconst descriptionId = \"field-tooltip-description\"\nconst triggerProps = controller.getTriggerProps({ describedBy: descriptionId })\nconst descriptionProps = controller.getDescriptionProps({ id: descriptionId, politeness: \"assertive\" })\n</script>\n\n<template>\n\t<button v-bind=\"triggerProps\">?</button>\n\t<span class=\"sr-only\" v-bind=\"descriptionProps\">\n\t\tUse your company email so access can be provisioned instantly.\n\t</span>\n</template>\n```\n\n`aria-hidden` flips automatically based on the tooltip state, so the announcement only fires when the helper is open.\n","readmeFilename":"README.md"}