Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-tippy
Advanced tools
vue-tippy - npm Package Compare versions
Comparing version 4.0.0-beta.4 to 4.0.0-beta.6
| { | ||
| "name": "vue-tippy", | ||
| "version": "4.0.0-beta.4", | ||
| "version": "4.0.0-beta.6", | ||
| "description": "Directive and Component wrapper for Tippy.js", | ||
@@ -5,0 +5,0 @@ "author": "Georges KABBOUCHI <georges.kabbouchi@gmail.com>", |
| # VueTippy | ||
| [](https://www.npmjs.com/package/vue-tippy) [](https://vuejs.org/) [](https://www.npmjs.com/package/vue-tippy) | ||
| > Directive wrapper for Tippy.js | ||
@@ -29,20 +30,20 @@ | ||
| ```js | ||
| import Vue from 'vue' | ||
| import VueTippy, { VueComponent]} from 'vue-tippy' | ||
| import Vue from "vue"; | ||
| import VueTippy, { TippyComponent } from "vue-tippy"; | ||
| Vue.use(VueTippy) | ||
| Vue.use(VueTippy); | ||
| // or | ||
| Vue.use(VueTippy,{ | ||
| directive : 'tippy', // => v-tippy | ||
| flipDuration: 0, | ||
| popperOptions: { | ||
| modifiers: { | ||
| preventOverflow: { | ||
| enabled: false | ||
| } | ||
| } | ||
| Vue.use(VueTippy, { | ||
| directive: "tippy", // => v-tippy | ||
| flipDuration: 0, | ||
| popperOptions: { | ||
| modifiers: { | ||
| preventOverflow: { | ||
| enabled: false | ||
| } | ||
| } | ||
| }) | ||
| } | ||
| }); | ||
| Vue.component('tippy',VueComponent); | ||
| Vue.component("tippy", TippyComponent); | ||
| ``` | ||
@@ -58,58 +59,50 @@ | ||
| #### Basic | ||
| ```html | ||
| <button content="Hi!" v-tippy> My Button! </button> | ||
| ``` | ||
| #### Basic Usage | ||
| #### Bind title | ||
| ```html | ||
| <button :content="dynamicTitle" v-tippy> My Button! </button> | ||
| <button content="Hi!" v-tippy>My Button!</button> | ||
| <button :content="dynamicTitle" v-tippy>My Button!</button> | ||
| <button content="Hello" v-tippy="{ placement : 'top', arrow: true }"> | ||
| My Button! | ||
| </button> | ||
| ``` | ||
| #### Bind settings | ||
| ```html | ||
| <button content="Hello" v-tippy="{ placement : 'top', arrow: true }"> My Button! </button> | ||
| ``` | ||
| #### Vue component | ||
| #### Using Vue component | ||
| ```html | ||
| <tippy to="myTrigger" arrow> | ||
| <div> | ||
| <h3> Header</h3> | ||
| <p style="color: black"> {{ message }} - data binding </p> | ||
| <button @click="clicked">Click<button> | ||
| </div> | ||
| <div> | ||
| <h3>Header</h3> | ||
| <p style="color: black">{{ message }} - data binding</p> | ||
| <button @click="clicked">Click</button> | ||
| </div> | ||
| </tippy> | ||
| <button name="myTrigger">Tippy Trigger<button> | ||
| ``` | ||
| <button name="myTrigger">Tippy Trigger</button> | ||
| ``` | ||
| ```html | ||
| <tippy arrow> | ||
| <template v-slot:trigger> | ||
| <button>Tippy Trigger<button> | ||
| </template> | ||
| <template v-slot:trigger> | ||
| <button>Tippy Trigger</button> | ||
| </template> | ||
| <div> | ||
| <h3> Header</h3> | ||
| <p style="color: black"> {{ message }} - data binding </p> | ||
| <button @click="clicked">Click<button> | ||
| </div> | ||
| <div> | ||
| <h3>Header</h3> | ||
| <p style="color: black">{{ message }} - data binding</p> | ||
| <button @click="clicked">Click</button> | ||
| </div> | ||
| </tippy> | ||
| ``` | ||
| ``` | ||
| ```html | ||
| <tippy :content="`tooltip: ${message}`" arrow> | ||
| <template v-slot:trigger> | ||
| <button>Tippy Trigger<button> | ||
| </template> | ||
| <template v-slot:trigger> | ||
| <button>Tippy Trigger</button> | ||
| </template> | ||
| </tippy> | ||
| ```` | ||
| ``` | ||
| > For full v4 documentation, visit [https://kabbouchi.github.io/vue-tippy/4.0/](https://kabbouchi.github.io/vue-tippy/4.0/). | ||
| > For more info on TippyJS view the documentation and demo here: https://atomiks.github.io/tippyjs/ | ||
@@ -116,0 +109,0 @@ |
| import tippy from 'tippy.js' | ||
| import TippyComponent from './components/Tippy.vue' | ||
| var tippyDirective = 'tippy' | ||
@@ -92,9 +94,7 @@ | ||
| } | ||
| } | ||
| }, | ||
| }) | ||
| } | ||
| }, | ||
| } | ||
| import TippyComponent from './components/Tippy.vue' | ||
| if (typeof window !== 'undefined' && window.Vue) { | ||
@@ -106,2 +106,5 @@ window.Vue.use(plugin) | ||
| export default plugin | ||
| export { TippyComponent } | ||
| export { | ||
| TippyComponent, | ||
| tippy, | ||
| } |
@@ -18,3 +18,3 @@ const booleanProps = { | ||
| touch: true, | ||
| touchHold: false | ||
| touchHold: false, | ||
| } | ||
@@ -51,7 +51,7 @@ export default { | ||
| zIndex: 9999, | ||
| ...booleanProps | ||
| ...booleanProps, | ||
| } | ||
| export { | ||
| booleanProps | ||
| booleanProps, | ||
| } |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.01%
712147
- Lines of code
- increased by0.02%
18157
Worsened metrics
- Number of lines in readme file
- decreased by-5.93%
111
No dependency changes