{"id":21835967,"url":"https://github.com/neluckoff/vue3-tooltip","last_synced_at":"2025-10-08T07:30:38.372Z","repository":{"id":226819314,"uuid":"769703453","full_name":"neluckoff/vue3-tooltip","owner":"neluckoff","description":"Module for convenient work with tooltips in Vue3","archived":false,"fork":false,"pushed_at":"2024-04-21T14:18:01.000Z","size":65,"stargazers_count":3,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-28T01:34:23.792Z","etag":null,"topics":["tooltip","tooltip-component","v-tooltip","vue3","vue3-tooltip"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue3-tooltip","language":"CSS","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/neluckoff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2024-03-09T20:20:36.000Z","updated_at":"2024-11-22T20:08:42.000Z","dependencies_parsed_at":"2024-03-09T22:38:45.265Z","dependency_job_id":"7ce822c8-44ba-4137-ad46-c8704b3b8194","html_url":"https://github.com/neluckoff/vue3-tooltip","commit_stats":null,"previous_names":["neluckoff/vue3-tooltip"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neluckoff%2Fvue3-tooltip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neluckoff%2Fvue3-tooltip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neluckoff%2Fvue3-tooltip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neluckoff%2Fvue3-tooltip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/neluckoff","download_url":"https://codeload.github.com/neluckoff/vue3-tooltip/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235688644,"owners_count":19029915,"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":["tooltip","tooltip-component","v-tooltip","vue3","vue3-tooltip"],"created_at":"2024-11-27T20:31:39.845Z","updated_at":"2025-10-08T07:30:33.096Z","avatar_url":"https://github.com/neluckoff.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003ch1\u003eVue3 Tooltip\u003c/h1\u003e\n    \u003cp\u003eModule for convenient work with tooltips in Vue3 (using a directive and a component)\u003c/p\u003e\n    \u003cspan\u003e\n        \u003cimg alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dt/vue3-tooltip\"\u003e\n        \u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/vue3-tooltip\"\u003e\n        \u003cimg alt=\"GitHub forks\" src=\"https://img.shields.io/github/forks/neluckoff/vue3-tooltip\"\u003e\n        \u003cimg alt=\"GitHub last commit\" src=\"https://img.shields.io/github/last-commit/neluckoff/vue3-tooltip\"\u003e\n    \u003c/span\u003e\n\u003c/div\u003e\n\u0026nbsp;\n\nYou can find a **CodeSandBox** containing the module, along with a demonstration of its functionality and the option to customize its styles, [by following this link](https://codesandbox.io/p/sandbox/vue3-tooltip-fsv9xl?file=%2Fsrc%2Fcomponents%2FTestComponent.vue%3A17%2C9-17%2C48\u0026layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cltklnak10006356iyt8wcwvd%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cltklnak10002356iretltoe2%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cltklnak10003356iyowpmbra%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cltklnak10005356irnq16azx%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cltklnak10002356iretltoe2%2522%253A%257B%2522id%2522%253A%2522cltklnak10002356iretltoe2%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522cltklnak10005356irnq16azx%2522%253A%257B%2522id%2522%253A%2522cltklnak10005356irnq16azx%2522%252C%2522activeTabId%2522%253A%2522cltklqkii004h356hnc0o0m3h%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522cltklqkii004h356hnc0o0m3h%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522cltklnak10003356iyowpmbra%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cltklnak10003356iyowpmbra%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D).\n\n## Installation\nFirst, let's add a module to your project using **npm**:\n\n```shell\nnpm install vue3-tooltip\n```\nOr you can install using **yarn**:\n\n```shell\nyarn add vue3-tooltip\n```\n\nAdd dependencies to your `main.ts`:\n\n```js\nimport { createApp } from 'vue'\nimport { TooltipDirective, TooltipComponent } from 'vue3-tooltip';\nimport 'vue3-tooltip/tooltip.css';\n\nconst app = createApp({...})\napp.directive('tooltip', TooltipDirective)\napp.component('tooltip', TooltipComponent)\napp.mount('#app')\n```\n\n## Using a Directive\nTo use tooltip as a directive, simply write `v-tooltip=\"...\"` on any block in HTML:\n\n```vue\n\u003cp v-tooltip=\"`Tooltip text`\"\u003eSome text\u003c/p\u003e\n```\n\nYou can also customize a directive using arguments and change its position using modifiers:\n\n`v-tooltip:bottom` *(default)* - Change tooltip position to bottom\n\n`v-tooltip:top` - Change tooltip position to top\n\n`v-tooltip:right` - Change tooltip position to right\n\n`v-tooltip:left` - Change tooltip position to left\n\nArguments for changing color (can be customized):\n\n`v-tooltip.primary` *(default)*\n\n`v-tooltip.secondary` \n\n`v-tooltip.accent`\n\nExample of using arguments and modifiers:\n\n```vue\n\u003cp v-tooltip:top=\"My name is ${name}\"\u003eMy name\u003c/p\u003e\n\u003cp v-tooltip:bottom.secondary=\"'I am' + years + 'years old'\"\u003eMy age\u003c/p\u003e\n\u003cp v-tooltip.accent=\"`I love writing code`\"\u003eMore info\u003c/p\u003e\n\u003cp v-tooltip:right.primary=\"secret\"\u003eSecret info\u003c/p\u003e\n```\n\n## Using a Component\nTo use a component you just need to register it in your template:\n\n```vue\n\u003ctooltip position=\"bottom\"\u003e\n    \u003ctemplate v-slot:text\u003e\n        \u003cp\u003ePoint at me and find out the secret\u003c/p\u003e\n    \u003c/template\u003e\n    \u003ctemplate v-slot:tooltip\u003e\n        \u003cstrong\u003eWatermelon is a berry\u003c/strong\u003e\n    \u003c/template\u003e\n\u003c/tooltip\u003e\n```\n\nThe component has the following props *(default values are highlighted in bold)*:\n\n`position` *(**'bottom'** | 'top' | 'left' | 'right')* - change tooltip position\n\n`disable` *(true | **false**)* - make the tooltip and the text for calling the tooltip inactive\n\n`clickable` *(true | **false**)* - do not hide the tooltip when hovering over it\n\n## Style customization\nTo customize styles, you need to paste your CSS file into `main.ts` after importing the basic tooltip styles `(vue3-tooltip/tooltip.css)`:\n\n```js\nimport { TooltipDirective, TooltipComponent } from 'vue3-tooltip';\nimport 'vue3-tooltip/tooltip.css';\n// After this line you need to do your import\nimport './assets/my-tooltip.scss';\n```\n\nTo customize tooltip **directive**, you need to create a global style file using `CSS` or `Sass`. My example demonstrates this process:\n\n```scss\n.vue-tooltip {\n  \u0026::after {\n    /*\n    * font-size, line-height, max-width, padding, border-radius, box-shadow, transition\n    */\n  }\n  \u0026__primary::after {\n    /*\n    * background, color\n    */\n  }\n  \u0026__secondary::after {// ... //}\n  \u0026__accent::after {// ... //}\n}\n```\n\n*If you want to explore customization in more detail and change all the classes in the module, you should check them out at [this link](https://github.com/neluckoff/vue3-tooltip/blob/master/src/assets/_directive.css).*\n\nTo customize the **component**, you can also override the standard styles:\n\n```scss\n.vue-tooltip {\n  \u0026.disable {\n    // ... //\n  }\n  \u0026--component {\n    /*\n    * font-size, line-height, max-width, padding, border-radius, box-shadow, transition\n    */\n  }\n}\n```\n\n*You can go deeper into component styles at [this link](https://github.com/neluckoff/vue3-tooltip/blob/master/src/assets/_component.css).*\n\nOr, instead of redefining classes, you can use variables, on which the entire tooltip design is based. If you want to add new variables, you can write to [Issues on GitHub](https://github.com/neluckoff/vue3-tooltip/issues).\n\n```css\n:root {\n  /* Directive Variables */\n  --tooltip-d-transition-duration: 0.4s;\n  --tooltip-d-border-radius: 4px;\n  --tooltip-d-padding: 2px 4px;\n  --tooltip-d-position-x: calc(100% + 10px);\n  --tooltip-d-position-y: calc(100% + 2px);\n  --tooltip-d-box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.14),\n      0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.1),\n      0px -1.5px 6px 0px rgba(0, 0, 0, 0.06);\n  --tooltip-d-z-index: 10;\n  --tooltip-d-max-width: 200px;\n  --tooltip-d-font-size: 14px;\n  --tooltip-d-width: max-content;\n  --tooltip-d-height: max-content;\n  --tooltip-d-outline: none;\n  --tooltip-d-border: none;\n\n  /* Component Variables */\n  --tooltip-c-transition-duration: 0.4s;\n  --tooltip-c-border-radius: 4px;\n  --tooltip-c-padding: 2px 4px;\n  --tooltip-c-position-x: calc(100% + 10px);\n  --tooltip-c-position-y: 100%;\n  --tooltip-c-box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.14),\n      0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.1),\n      0px -1.5px 6px 0px rgba(0, 0, 0, 0.06);\n  --tooltip-c-z-index: 10;\n  --tooltip-c-max-width: max-content;\n  --tooltip-c-width: max-content;\n  --tooltip-c-height: max-content;\n  --tooltip-c-outline: none;\n  --tooltip-c-border: none;\n\n  /* Colors */\n  --tooltip-primary-color: #212121;\n  --tooltip-primary-background: #fff;\n  --tooltip-seconary-color: #fff;\n  --tooltip-seconary-background: #475DEB;\n  --tooltip-accent-color: #fff;\n  --tooltip-accent-background: #212121;\n  \n  --tooltip-component-color: #212121;\n  --tooltip-component-background: #fff;\n}\n```\n\n## Contributing\nI have a positive attitude towards PR and pull requests. Glad to see that people like the package.\n\n- Creator: [@neluckoff](https://github.com/neluckoff)\n\n## License\n\n- Copyright © 2024 [neluckoff](https://github.com/neluckoff).\n- This project is [MIT](https://github.com/neluckoff/vue3-tooltip/blob/master/LICENSE.md) licensed.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneluckoff%2Fvue3-tooltip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneluckoff%2Fvue3-tooltip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneluckoff%2Fvue3-tooltip/lists"}