35 |
36 |
37 |
51 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) Georges KABBOUCHI
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/docs/content/en/installation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Installation
3 | description: ''
4 | category: Getting started
5 | position: 2
6 | ---
7 |
8 | Add `vue-tippy` dependency to your project:
9 |
10 |
11 |
12 |
13 | ```bash
14 | yarn add vue-tippy@v6
15 | ```
16 |
17 |
18 |
19 |
20 | ```bash
21 | npm install vue-tippy@v6
22 | ```
23 |
24 |
25 |
26 | ### Install VueTippy globally (optional)
27 |
28 | ```js
29 | import { createApp } from 'vue'
30 |
31 | import VueTippy from 'vue-tippy'
32 | // or
33 | import { plugin as VueTippy } from 'vue-tippy'
34 | import 'tippy.js/dist/tippy.css' // optional for styling
35 |
36 | const app = createApp({})
37 |
38 | app.use(
39 | VueTippy,
40 | // optional
41 | {
42 | directive: 'tippy', // => v-tippy
43 | component: 'tippy', // =>
44 | componentSingleton: 'tippy-singleton', // => ,
45 | defaultProps: {
46 | placement: 'auto-end',
47 | allowHTML: true,
48 | }, // => Global default options * see all props
49 | }
50 | )
51 |
52 | app.mount('#app')
53 | ```
54 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | Contributions are **welcome** and will be fully **credited**.
4 |
5 | We accept contributions via Pull Requests on [Github](https://github.com/KABBOUCHI/vue-tippy).
6 |
7 |
8 | ## Pull Requests
9 |
10 | - **Keep the same style** - eslint will automatically be ran before committing
11 |
12 | - **Tip** to pass lint tests easier use the `npm run lint:fix` command
13 |
14 | - **Add tests!** - Your patch won't be accepted if it doesn't have tests.
15 |
16 | - **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date.
17 |
18 | - **Consider our release cycle** - We try to follow [SemVer v2.0.0](http://semver.org/). Randomly breaking public APIs is not an option.
19 |
20 | - **Create feature branches** - Don't ask us to pull from your master branch.
21 |
22 | - **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
23 |
24 | - **Send coherent history** - Make sure your commits message means something
25 |
26 |
27 | ## Running Tests
28 |
29 | Launch visual tests and watch the components at the same time
30 |
31 | ``` bash
32 | $ npm run dev
33 | ```
34 |
35 |
36 | **Happy coding**!
37 |
--------------------------------------------------------------------------------
/playground/pages/Testing.vue:
--------------------------------------------------------------------------------
1 |
2 |
50 | ```
51 |
52 | A tippy is essentially three nested `div`s.
53 |
54 | - `[data-tippy-root]` is the outermost node. It is what Popper uses to position the tippy. You don't need to apply any styles to this element.
55 | - `tippy-box` is the actual box node.
56 | - `tippy-content` is the content node.
57 |
58 | Depending on the props supplied, there will exist other elements inside it:
59 |
60 | ```html
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 | My content
69 |
70 |
71 |
72 | ```
73 |
74 | ## Creating a theme
75 |
76 | Themes are created by including a class on the `tippy-box` element as part of a selector in the form `.tippy-box[data-theme~='theme']`.
77 |
78 | Let's demonstrate this by creating our own theme called`tomato`:
79 |
80 | ```css
81 | .tippy-box[data-theme~='tomato'] {
82 | background-color: tomato;
83 | color: yellow;
84 | }
85 | ```
86 |
87 | To apply the theme:
88 |
89 | ```js
90 | useTippy(target, {
91 | theme: 'tomato',
92 | })
93 | ```
94 |
95 | Or using scoped style
96 |
97 | ```html
98 |
99 |
100 |
110 |
111 |
112 |
113 |
116 |
117 |
123 | ```
124 |
125 | What is `~=`?
126 |
127 | Since `theme` can have multiple names, it allows you to target a single theme inside the space-separated list. Visit [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) for more information.
128 |
129 |
130 |
131 | ## Styling the arrow
132 |
133 | There are two types of arrows:
134 |
135 | - CSS arrows (using `border-width`)
136 | - SVG arrows (using an `