{"_id":"@bootcn-vue/tooltip","_rev":"3-245bbb0361cbc992335db87898928ab0","name":"@bootcn-vue/tooltip","dist-tags":{"latest":"0.2.2"},"versions":{"0.2.0":{"name":"@bootcn-vue/tooltip","version":"0.2.0","keywords":["vue","vue3","bootstrap","tooltip","popover","components"],"author":{"name":"Shashank Shandilya"},"license":"MIT","_id":"@bootcn-vue/tooltip@0.2.0","maintainers":[{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"}],"homepage":"https://banavasi.github.io/Bootcn-vue/","bugs":{"url":"https://github.com/banavasi/Bootcn-vue/issues"},"dist":{"shasum":"4ec7e13a755a96652effd04f8e58de6fe40495a1","tarball":"https://registry.npmjs.org/@bootcn-vue/tooltip/-/tooltip-0.2.0.tgz","fileCount":10,"integrity":"sha512-aT756L6dJyLl+fsB0KAnM9f72lo6zu54vCDpxRVdVh0dcwfujxn8HIKoJCLUvg4eWRD082pJQR8PCFDyXj9buw==","signatures":[{"sig":"MEUCIATvEWOc0VCeLxJLjHkSrhPHX14l9V1J2euCy75yMZsNAiEA1+YcOQH6J9rabAAalM8rxFJGrM0cMEjrlAHzMIa+YDs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bootcn-vue%2ftooltip@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":20102},"main":"./dist/index.js","type":"module","_from":"file:bootcn-vue-tooltip-0.2.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","lint":"eslint src --fix","test":"vitest run","build":"tsup","clean":"rm -rf dist","test:watch":"vitest","type-check":"tsc --noEmit"},"_npmUser":{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"},"_resolved":"/tmp/981b4378766ed7b7d30f705776e95d70/bootcn-vue-tooltip-0.2.0.tgz","_integrity":"sha512-aT756L6dJyLl+fsB0KAnM9f72lo6zu54vCDpxRVdVh0dcwfujxn8HIKoJCLUvg4eWRD082pJQR8PCFDyXj9buw==","repository":{"url":"git+https://github.com/banavasi/Bootcn-vue.git","type":"git","directory":"packages/tooltip"},"_npmVersion":"10.9.4","description":"Accessible, customizable tooltip component built with Bootstrap 5 and Vue 3","directories":{},"_nodeVersion":"22.21.1","dependencies":{"reka-ui":"^2.2.1","@bootcn-vue/core":"0.4.0"},"publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","tsup":"^8.3.5","jsdom":"^26.0.0","vitest":"^3.1.1","typescript":"~5.8.0","unplugin-vue":"^7.1.0","@vue/test-utils":"^2.4.6"},"peerDependencies":{"vue":"^3.5.0","bootstrap":"^5.3.0"},"_npmOperationalInternal":{"tmp":"tmp/tooltip_0.2.0_1768262285076_0.10668472536514928","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@bootcn-vue/tooltip","version":"0.2.1","keywords":["vue","vue3","bootstrap","tooltip","popover","components"],"author":{"name":"Shashank Shandilya"},"license":"MIT","_id":"@bootcn-vue/tooltip@0.2.1","maintainers":[{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"}],"homepage":"https://banavasi.github.io/Bootcn-vue/","bugs":{"url":"https://github.com/banavasi/Bootcn-vue/issues"},"dist":{"shasum":"bc46d2b11a589592ad5e0b99a10004359fb7ce98","tarball":"https://registry.npmjs.org/@bootcn-vue/tooltip/-/tooltip-0.2.1.tgz","fileCount":10,"integrity":"sha512-AWVeITS+xa8XT6KxYb+3YCz4/8r8PZpWbgUCbCM0begFKdj2RUzvpLhpAZ6Luc9tU4pyUgFTPlmT6vzBmFj6Aw==","signatures":[{"sig":"MEQCIAl5hUaxxqgIqsZC2F8zAHv0JXbXcyNLBZvlGNzrEH4CAiBoXgXlgpSJx1mg5nbNVmDzWdHfIHe+9cRG/cMfzslZzw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28204},"main":"./dist/index.js","type":"module","_from":"file:bootcn-vue-tooltip-0.2.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","lint":"eslint src --fix","test":"vitest run","build":"tsup","clean":"rm -rf dist","test:watch":"vitest","type-check":"tsc --noEmit"},"_npmUser":{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"},"_resolved":"/tmp/be4e58782c99a0cf158c38ddc8600250/bootcn-vue-tooltip-0.2.1.tgz","_integrity":"sha512-AWVeITS+xa8XT6KxYb+3YCz4/8r8PZpWbgUCbCM0begFKdj2RUzvpLhpAZ6Luc9tU4pyUgFTPlmT6vzBmFj6Aw==","repository":{"url":"git+https://github.com/banavasi/Bootcn-vue.git","type":"git","directory":"packages/tooltip"},"_npmVersion":"10.9.4","description":"Accessible, customizable tooltip component built with Bootstrap 5 and Vue 3","directories":{},"_nodeVersion":"22.21.1","dependencies":{"reka-ui":"^2.2.1","@bootcn-vue/core":"0.4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","tsup":"^8.3.5","jsdom":"^26.0.0","vitest":"^3.1.1","typescript":"~5.8.0","unplugin-vue":"^7.1.0","@vue/test-utils":"^2.4.6"},"peerDependencies":{"vue":"^3.5.0","bootstrap":"^5.3.0"},"_npmOperationalInternal":{"tmp":"tmp/tooltip_0.2.1_1768328915036_0.340384229486153","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@bootcn-vue/tooltip","version":"0.2.2","description":"Accessible, customizable tooltip component built with Bootstrap 5 and Vue 3","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"dependencies":{"reka-ui":"^2.2.1","@bootcn-vue/core":"0.4.0"},"devDependencies":{"@vue/test-utils":"^2.4.6","jsdom":"^26.0.0","tsup":"^8.3.5","typescript":"~5.8.0","unplugin-vue":"^7.1.0","vitest":"^3.1.1","vue":"^3.5.13","vue-tsc":"^2.2.8"},"peerDependencies":{"bootstrap":"^5.3.0","vue":"^3.5.0"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/banavasi/Bootcn-vue.git","directory":"packages/tooltip"},"homepage":"https://banavasi.github.io/Bootcn-vue/","bugs":{"url":"https://github.com/banavasi/Bootcn-vue/issues"},"keywords":["vue","vue3","bootstrap","tooltip","popover","components"],"author":{"name":"Shashank Shandilya"},"license":"MIT","scripts":{"build":"tsup && pnpm build:types","build:types":"vue-tsc --declaration --emitDeclarationOnly --outDir dist","dev":"tsup --watch","clean":"rm -rf dist","type-check":"vue-tsc --noEmit","lint":"eslint src --fix","test":"vitest run","test:watch":"vitest"},"_id":"@bootcn-vue/tooltip@0.2.2","_integrity":"sha512-pwSJuKho8p3N+XbAgK7KqbgP9RZtc8hp9wZfA4nilU2r7mrjvqrN3NDUMHSO6mjD4qBl54SlGEXI2bDfzu+Xew==","_resolved":"/tmp/d2d578d2d46634c9362c15b9eab32dfd/bootcn-vue-tooltip-0.2.2.tgz","_from":"file:bootcn-vue-tooltip-0.2.2.tgz","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-pwSJuKho8p3N+XbAgK7KqbgP9RZtc8hp9wZfA4nilU2r7mrjvqrN3NDUMHSO6mjD4qBl54SlGEXI2bDfzu+Xew==","shasum":"078f81f733c6e6873f451cb06d86189bbde635c6","tarball":"https://registry.npmjs.org/@bootcn-vue/tooltip/-/tooltip-0.2.2.tgz","fileCount":17,"unpackedSize":35141,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCmuFHLIdjX9NA6+FfsfXC59IZqg4yfu4I2Sakd7xS3gAIhAIqPi0b1fSn01XzZ8pkftrElxz3JX58N0gDBKh/puxYJ"}]},"_npmUser":{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"},"directories":{},"maintainers":[{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tooltip_0.2.2_1768368472386_0.7461611544933642"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-12T23:58:04.967Z","modified":"2026-01-14T05:27:52.654Z","0.2.0":"2026-01-12T23:58:05.233Z","0.2.1":"2026-01-13T18:28:35.182Z","0.2.2":"2026-01-14T05:27:52.526Z"},"bugs":{"url":"https://github.com/banavasi/Bootcn-vue/issues"},"author":{"name":"Shashank Shandilya"},"license":"MIT","homepage":"https://banavasi.github.io/Bootcn-vue/","keywords":["vue","vue3","bootstrap","tooltip","popover","components"],"repository":{"type":"git","url":"git+https://github.com/banavasi/Bootcn-vue.git","directory":"packages/tooltip"},"description":"Accessible, customizable tooltip component built with Bootstrap 5 and Vue 3","maintainers":[{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"}],"readme":"# @bootcn-vue/tooltip\n\nAccessible, customizable tooltip component built with Bootstrap 5, Vue 3, and Reka UI.\n\n[![npm version](https://badge.fury.io/js/@bootcn-vue%2Ftooltip.svg)](https://www.npmjs.com/package/@bootcn-vue/tooltip)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n## 📚 Documentation\n\n**[View Components & Examples](https://banavasi.github.io/Bootcn-vue/?path=/docs/components-tooltip--docs)** - Interactive Storybook\n\n## Overview\n\nA fully accessible tooltip component that displays contextual information on hover or focus. Built on Reka UI primitives with Bootstrap 5 styling and smart positioning.\n\n## Installation\n\n### Using CLI (Recommended)\n\n```bash\n# Initialize bootcn-vue (if not already done)\nnpx @bootcn-vue/cli@latest init\n\n# Add tooltip component\nnpx @bootcn-vue/cli@latest add tooltip\n```\n\n### Direct Installation\n\n```bash\nnpm install @bootcn-vue/tooltip @bootcn-vue/core bootstrap reka-ui\n```\n\n## Styling Requirements\n\nThe tooltip component requires Bootstrap 5 tooltip styles. You must import Bootstrap's tooltip SCSS in your main stylesheet.\n\n### Option 1: Import Full Bootstrap (Recommended)\n\nIf you're already using Bootstrap in your project:\n\n```scss\n// In your main SCSS file (e.g., src/assets/styles/main.scss)\n@import \"bootstrap/scss/bootstrap\";\n\n// Import tooltip component-specific styles\n@import \"@bootcn-vue/tooltip/src/tooltip.css\";\n```\n\n### Option 2: Import Only Required Bootstrap Modules\n\nFor a smaller bundle size, import only the necessary Bootstrap modules:\n\n```scss\n// In your main SCSS file (e.g., src/assets/styles/main.scss)\n@import \"bootstrap/scss/functions\";\n@import \"bootstrap/scss/variables\";\n@import \"bootstrap/scss/variables-dark\";\n@import \"bootstrap/scss/maps\";\n@import \"bootstrap/scss/mixins\";\n@import \"bootstrap/scss/utilities\";\n@import \"bootstrap/scss/root\";\n@import \"bootstrap/scss/transitions\";\n@import \"bootstrap/scss/tooltip\";\n\n// Import tooltip component-specific styles\n@import \"@bootcn-vue/tooltip/src/tooltip.css\";\n```\n\n**Note:** The component requires Bootstrap's tooltip CSS variables and classes to function properly. The `tooltip.css` file contains additional styling for the tooltip arrow positioning.\n\n## Features\n\n- ✅ **Accessible** - Full keyboard navigation and screen reader support\n- ✅ **Smart Positioning** - Automatically adjusts to avoid viewport edges\n- ✅ **Bootstrap 5 Styled** - Matches Bootstrap tooltip design\n- ✅ **Composable** - Built on Reka UI primitives\n- ✅ **TypeScript** - Full type safety\n- ✅ **Customizable** - Control delay, positioning, and behavior\n- ✅ **Icon Support** - Perfect for info icons with FontAwesome\n\n## Usage\n\n### Basic Example\n\n```vue\n\n\n\n```\n\n### With Icon (Common Pattern)\n\n```vue\n\n\n\n```\n\n### Positioning\n\nControl where the tooltip appears relative to the trigger:\n\n```vue\n\n```\n\n### Alignment\n\nControl alignment along the side:\n\n```vue\n\n```\n\n### Custom Delay\n\nControl how long before the tooltip appears:\n\n```vue\n\n```\n\n### Controlled State\n\nControl the open/close state programmatically:\n\n```vue\n\n\n\n```\n\n### Disabled Tooltip\n\nConditionally disable the tooltip:\n\n```vue\n\n\n\n```\n\n## Components API\n\n### `Tooltip`\n\nRoot component that manages tooltip state and provides context.\n\n**Props:**\n\n| Prop | Type | Default | Description |\n| ------------------------- | --------- | ------- | ---------------------------------------- |\n| `delayDuration` | `number` | `700` | Delay in ms before showing tooltip |\n| `disableClosingTrigger` | `boolean` | `false` | Disable closing when trigger is clicked |\n| `disableHoverableContent` | `boolean` | `false` | Prevent hovering over tooltip content |\n| `disabled` | `boolean` | `false` | Disable tooltip completely |\n| `defaultOpen` | `boolean` | `false` | Initial open state (uncontrolled) |\n| `open` | `boolean` | - | Controlled open state (use with v-model) |\n\n**Events:**\n\n- `update:open` - Emitted when open state changes\n\n### `TooltipTrigger`\n\nElement that triggers the tooltip on hover or focus.\n\n**Usage Notes:**\n\n- Should contain a single focusable element (button, link, etc.)\n- Tooltip shows on both hover and keyboard focus\n- Fully accessible with keyboard navigation\n\n### `TooltipContent`\n\nThe tooltip popup with Bootstrap styling.\n\n**Props:**\n\n| Prop | Type | Default | Description |\n| ------------ | ---------------------------------------- | ---------- | ------------------------------ |\n| `side` | `'top' \\| 'right' \\| 'bottom' \\| 'left'` | `'top'` | Tooltip placement |\n| `sideOffset` | `number` | `4` | Distance from trigger (pixels) |\n| `align` | `'start' \\| 'center' \\| 'end'` | `'center'` | Alignment along the side |\n| `class` | `string` | - | Additional CSS classes |\n\n**Auto-positioning:**\n\nThe tooltip automatically adjusts its position to stay within the viewport, even if you specify a preferred side.\n\n## Styling\n\n### Default Styles\n\nTooltips use Bootstrap's default dark theme:\n\n- Dark background (`bg-dark`)\n- White text\n- Small padding\n- Border radius\n- Drop shadow\n\n### Custom Styling\n\nAdd custom classes to the `TooltipContent`:\n\n```vue\n\n```\n\n### CSS Customization\n\nOverride styles in your stylesheet:\n\n```css\n/* Target tooltip content */\n[data-radix-popper-content-wrapper] {\n z-index: 9999;\n}\n\n.tooltip-content {\n max-width: 300px;\n font-size: 0.875rem;\n}\n```\n\n## Accessibility\n\nThe tooltip component follows WCAG 2.1 guidelines:\n\n- ✅ **Keyboard Navigation** - Shows on focus, hides on blur\n- ✅ **Screen Readers** - Proper ARIA attributes\n- ✅ **Focus Management** - Doesn't trap focus\n- ✅ **ESC to Close** - Pressing Escape closes the tooltip\n- ✅ **Role** - Uses proper `role=\"tooltip\"`\n- ✅ **aria-describedby** - Automatically linked to trigger\n\n**Best Practices:**\n\n- Use tooltips for supplementary information only\n- Keep content concise (1-2 sentences)\n- Don't hide critical information in tooltips\n- Ensure tooltip content is also available to touch users\n\n## TypeScript Support\n\nFull TypeScript support with exported types:\n\n```typescript\nimport type {\n TooltipRootProps,\n TooltipContentProps,\n} from \"@bootcn-vue/tooltip\";\n```\n\n## Dependencies\n\n- `@bootcn-vue/core` - Core utilities\n- `reka-ui` - Accessible tooltip primitives\n- `bootstrap` - Styling (peer dependency)\n\n## Peer Dependencies\n\n- `vue` ^3.5.0\n- `bootstrap` ^5.3.0\n\n## Links\n\n- **[GitHub Repository](https://github.com/banavasi/Bootcn-vue)**\n- **[Documentation](https://banavasi.github.io/Bootcn-vue/)**\n- **[Report Issues](https://github.com/banavasi/Bootcn-vue/issues)**\n\n## Related Packages\n\n- [@bootcn-vue/cli](https://www.npmjs.com/package/@bootcn-vue/cli) - CLI for adding components\n- [@bootcn-vue/core](https://www.npmjs.com/package/@bootcn-vue/core) - Core utilities\n- [@bootcn-vue/forms](https://www.npmjs.com/package/@bootcn-vue/forms) - Form components (uses tooltips in labels)\n\n## License\n\nMIT © [Shashank Shandilya](https://github.com/banavasi)\n","readmeFilename":"README.md"}