{"id":19990527,"url":"https://github.com/RobinCK/vue-popper","last_synced_at":"2025-05-04T09:35:59.622Z","repository":{"id":43557203,"uuid":"90663170","full_name":"RobinCK/vue-popper","owner":"RobinCK","description":":whale: VueJS popover component based popper.js 🇺🇦","archived":false,"fork":false,"pushed_at":"2023-07-11T00:09:04.000Z","size":1139,"stargazers_count":439,"open_issues_count":25,"forks_count":105,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-10-29T23:43:28.780Z","etag":null,"topics":["popover","popper","vue","vue-component","vuejs"],"latest_commit_sha":null,"homepage":"https://robinck.github.io/vue-popper/","language":"Vue","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/RobinCK.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"open_collective":"vue-popper"}},"created_at":"2017-05-08T19:07:59.000Z","updated_at":"2024-10-11T10:48:29.000Z","dependencies_parsed_at":"2023-09-29T08:53:23.657Z","dependency_job_id":null,"html_url":"https://github.com/RobinCK/vue-popper","commit_stats":{"total_commits":265,"total_committers":31,"mean_commits":8.548387096774194,"dds":"0.42641509433962266","last_synced_commit":"5d966ea141f9c63c3dc5f129c1b35a7ec8bf0a8b"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobinCK%2Fvue-popper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobinCK%2Fvue-popper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobinCK%2Fvue-popper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobinCK%2Fvue-popper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RobinCK","download_url":"https://codeload.github.com/RobinCK/vue-popper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224230216,"owners_count":17277301,"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":["popover","popper","vue","vue-component","vuejs"],"created_at":"2024-11-13T04:51:17.359Z","updated_at":"2024-11-13T04:51:54.006Z","avatar_url":"https://github.com/RobinCK.png","language":"Vue","funding_links":["https://opencollective.com/vue-popper","https://opencollective.com/vue-popper/contribute","https://opencollective.com/vue-popper/organization/0/website","https://opencollective.com/vue-popper/organization/1/website","https://opencollective.com/vue-popper/organization/2/website","https://opencollective.com/vue-popper/organization/3/website","https://opencollective.com/vue-popper/organization/4/website","https://opencollective.com/vue-popper/organization/5/website","https://opencollective.com/vue-popper/organization/6/website","https://opencollective.com/vue-popper/organization/7/website","https://opencollective.com/vue-popper/organization/8/website","https://opencollective.com/vue-popper/organization/9/website"],"categories":["Vue","UI组件","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components"],"sub_categories":["提示","UI Components","Tooltip"],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg width=\"250\" src=\"https://cdn.rawgit.com/RobinCK/vue-popper/4431e4cc/doc/logo.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://opencollective.com/vue-popper\" alt=\"Financial Contributors on Open Collective\"\u003e\u003cimg src=\"https://opencollective.com/vue-popper/all/badge.svg?label=financial+contributors\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/RobinCK/vue-popper\"\u003e\u003cimg src=\"https://img.shields.io/badge/vuejs-2.x-brightgreen.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-popperjs\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/vue-popperjs.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://david-dm.org/RobinCK/vue-popper\"\u003e\u003cimg src=\"https://david-dm.org/RobinCK/vue-popper.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://david-dm.org/RobinCK/vue-popper?type=dev\"\u003e\u003cimg src=\"https://david-dm.org/RobinCK/vue-popper/dev-status.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/RobinCK/vue-popper\"\u003e\u003cimg src=\"https://img.shields.io/bower/v/vue-popperjs.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/RobinCK/vue-popper\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-popperjs.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/RobinCK/vue-popper/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/vue-popperjs.svg?style=flat-square\"\u003e\u003c/a\u003e\n\n\u003c/p\u003e\n\n# vue-popperjs\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/RobinCK/vue-popper.svg)](https://greenkeeper.io/)\nVueJS popover component based on \u003ca href=\"https://popper.js.org/\"\u003epopper.js\u003c/a\u003e\n\n## Example\n\n[jsFiddle](https://jsfiddle.net/Robin_ck/n840tvp2/)\n\n## Install\n#### CDN\n\nRecommended: https://unpkg.com/vue-popperjs, which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at https://unpkg.com/vue-popperjs/\n\n#### NPM\n\n``` bash\nnpm install vue-popperjs --save\n```\n\n#### Yarn\n\n``` bash\nyarn add vue-popperjs\n```\n\n#### Bower\n\n``` bash\nbower install vue-popperjs --save\n```\n\n## Development Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# build dist files\nnpm run build\n```\n\n## Usage\n\n### VueJS single file (ECMAScript 2015)\n```html\n\u003ctemplate\u003e\n  \u003cpopper\n    trigger=\"clickToOpen\"\n    :options=\"{\n      placement: 'top',\n      modifiers: { offset: { offset: '0,10px' } }\n    }\"\u003e\n    \u003cdiv class=\"popper\"\u003e\n      Popper Content\n    \u003c/div\u003e\n\n    \u003cbutton slot=\"reference\"\u003e\n      Reference Element\n    \u003c/button\u003e\n  \u003c/popper\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Popper from 'vue-popperjs';\n  import 'vue-popperjs/dist/vue-popper.css';\n\n  export default {\n    components: {\n      'popper': Popper\n    },\n  }\n\u003c/script\u003e\n```\n\n### Browser (ES5)\n```html\n\u003clink rel=\"stylesheet\" href=\"vue-popper.css\"\u003e\n\u003cscript type=\"text/javascript\" src=\"popper.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"vue.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"vue-popper.js\"\u003e\u003c/script\u003e\n\n\u003cdiv id=\"app\"\u003e\n  \u003cpopper\n    trigger=\"clickToOpen\"\n    :options=\"{\n      placement: 'top',\n      modifiers: { offset: { offset: '0,10px' } }\n    }\"\u003e\n    \u003cdiv class=\"popper\"\u003e\n      Popper Content\n    \u003c/div\u003e\n\n    \u003cbutton slot=\"reference\"\u003e\n      Reference Element\n    \u003c/button\u003e\n  \u003c/popper\u003e\n\u003c/div\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  new Vue({\n    el: '#app',\n    components: {\n      'popper': VuePopper\n    }\n  });\n\u003c/script\u003e\n```\n\n## Props\n\n| Props               | Type      | Default                                         | Description  |\n| --------------------|:----------| ------------------------------------------------|--------------|\n| disabled            | Boolean   | false                                           |   |\n| delay-on-mouse-over | Number    | 10                                              | Delay in ms before showing popper during a mouse over |\n| delay-on-mouse-out  | Number    | 10                                              | Delay in ms before hiding popper during a mouse out |\n| append-to-body      | Boolean   | false                                           |   |\n| visible-arrow       | Boolean   | true                                            |   |\n| force-show          | Boolean   | false                                           |   |\n| trigger             | String    | hover                                           | Optional value: \u003cbr\u003e\u003cul\u003e\u003cli\u003e**hover** - hover to open popper content\u003c/li\u003e\u003cli\u003e**clickToOpen** - every click on the popper triggers open, only clicking outside of the popper closes it\u003c/li\u003e\u003cli\u003e**clickToToggle** - click on the popper toggles it's visibility\u003c/li\u003e\u003cli\u003e**click** (deprecated - same as **clickToToggle**)\u003c/li\u003e\u003cli\u003e**focus** - opens popper on focus event, closes on blur.\u003c/li\u003e |\n| content             | String    | null                                            |   |\n| enter-active-class  | String    | null                                            |   |\n| leave-active-class  | String    | null                                            |   |\n| boundaries-selector | String    | null                                            |   |\n| transition          | String    | empty                                           |   |\n| options             | Object    | { placement: 'bottom', gpuAcceleration: false } | [popper.js](https://popper.js.org/popper-documentation.html) options  |\n| data-value          | Any       | null                                            | data of popper  |\n| stop-propagation    | Boolean   | false                                           |  |\n| prevent-default     | Boolean   | false                                           |  |\n| root-class          | String    | empty                                           | Class name for root element |\n\n\n## Events\n| Name            | Params                   | Description  |\n| ----------------|:-------------------------|--------------|\n| created         | context[Object]          | Created popper component |\n| show            |                          | Show popover |\n| hide            |                          | Hide popover |\n| document-click  |                          | |\n\n## Other my Vue JS plugins\n\n| Project | Status | Description |\n|---------|--------|-------------|\n| [vue-ls](https://github.com/RobinCK/vue-ls)                | ![npm](https://img.shields.io/npm/v/vue-ls.svg)      | Vue plugin for work with local storage, session storage and memory storage from Vue context |\n| [vue-gallery](https://github.com/RobinCK/vue-gallery)      | ![npm](https://img.shields.io/npm/v/vue-gallery.svg) | Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers |\n\n## Contributors\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\u003ca href=\"https://github.com/RobinCK/vue-popper/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/vue-popper/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n### Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/vue-popper/contribute)]\n\n#### Individuals\n\n\u003ca href=\"https://opencollective.com/vue-popper\"\u003e\u003cimg src=\"https://opencollective.com/vue-popper/individuals.svg?width=890\"\u003e\u003c/a\u003e\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/vue-popper/contribute)]\n\n\u003ca href=\"https://opencollective.com/vue-popper/organization/0/website\"\u003e\u003cimg src=\"https://opencollective.com/vue-popper/organization/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/vue-popper/organization/1/website\"\u003e\u003cimg src=\"https://opencollective.com/vue-popper/organization/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/vue-popper/organization/2/website\"\u003e\u003cimg src=\"https://opencollective.com/vue-popper/organization/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/vue-popper/organization/3/website\"\u003e\u003cimg src=\"https://opencollective.com/vue-popper/organization/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/vue-popper/organization/4/website\"\u003e\u003cimg src=\"https://opencollective.com/vue-popper/organization/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/vue-popper/organization/5/website\"\u003e\u003cimg src=\"https://opencollective.com/vue-popper/organization/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/vue-popper/organization/6/website\"\u003e\u003cimg src=\"https://opencollective.com/vue-popper/organization/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/vue-popper/organization/7/website\"\u003e\u003cimg src=\"https://opencollective.com/vue-popper/organization/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/vue-popper/organization/8/website\"\u003e\u003cimg src=\"https://opencollective.com/vue-popper/organization/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/vue-popper/organization/9/website\"\u003e\u003cimg src=\"https://opencollective.com/vue-popper/organization/9/avatar.svg\"\u003e\u003c/a\u003e\n\n## License\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FRobinCK%2Fvue-popper.svg?type=large)](https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FRobinCK%2Fvue-popper?ref=badge_large)\n\nMIT © [Igor Ognichenko](https://github.com/RobinCK)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRobinCK%2Fvue-popper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRobinCK%2Fvue-popper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRobinCK%2Fvue-popper/lists"}