Skip to content

Commit d70cbbb

Browse files
hekiganhekigan
committed
🔖 v1.1.0
1 parent 9cdbd41 commit d70cbbb

File tree

7 files changed

+239
-143
lines changed

7 files changed

+239
-143
lines changed

‎README.md

+4-56
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,7 @@
88
99
### Usage
1010

11-
```js
12-
// ES6
13-
import Tooltip from 'vue-directive-tooltip';
14-
Vue.use(Tooltip);
15-
16-
// ES5
17-
require('vue-directive-tooltip');
18-
```
11+
Super simple
1912

2013
```html
2114
<span v-tooltip="'my text'">some text</span>
@@ -24,57 +17,12 @@ require('vue-directive-tooltip');
2417
It is recommended to also add the CSS file which is in the `./css/` folder.
2518
A SASS file is also included in the source for those who prefer fiddling.
2619

27-
### Installation
28-
29-
Install via [yarn](https://github.com/yarnpkg/yarn)
30-
31-
yarn add vue-directive-tooltip (--dev)
32-
33-
or npm
34-
35-
npm install vue-directive-tooltip (--save-dev)
36-
37-
38-
### configuration
39-
40-
```html
41-
<span v-tooltip="'my text'">some text</span>
42-
```
43-
or
44-
```html
45-
<span v-tooltip="{content: 'my text'}">some text</span>
46-
```
20+
### Documentation
4721

48-
**modifier**
49-
<br/> 📝 Change the position of the tooltip
50-
<br/> ℹ️ options: bottom (default) | top | left | right
51-
<br/> 💡 example
52-
```html
53-
<span v-tooltip.top="'my text'">some text</span>
54-
```
55-
**content**
56-
<br/> 📝 Set the text to display
57-
<br/> 💡 example
58-
```html
59-
<span v-tooltip="{ content: 'my text' }">some text</span>
60-
```
61-
**class**
62-
<br/> 📝 Append custom CSS class
63-
<br/> 💡 example
64-
```html
65-
<span v-tooltip="{ class: 'custom-class other-custom-class' }">some text</span>
66-
```
67-
**visible**
68-
<br/> 📝 Show/hide the tooltip
69-
<br/> ℹ️ options: true (default) | false
70-
<br/> 💡 example
71-
```html
72-
<span v-tooltip="{ content: 'my text', visible: true }">some text</span>
73-
```
22+
[Full documentation with examples](https://hekigan.github.io/vue-directive-tooltip/)
7423

75-
### Examples
24+
![Alt text](https://hekigan.github.io/vue-directive-tooltip/images/github-screenshot.jpg "Vue directive tooltip - screenshot")
7625

77-
See [`example`](example/index.html) folder.
7826

7927
### Builds
8028

‎css/index.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/index.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/index.html

+88-18
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
border: 1px solid #004edc;
2626
border-radius: 3px;
2727
color: #fff;
28+
padding: 6px 10px;
2829
}
2930

3031
button:hover {
@@ -36,23 +37,27 @@
3637
text-decoration: underline;
3738
}
3839

40+
.tooltip-content {
41+
color: #fff;
42+
}
43+
3944
.vue-tooltip.tooltip-custom {
4045
background-color: red;
4146
}
4247

43-
.vue-tooltip.tooltip-custom[x-placement^="top"] [x-arrow] {
48+
.vue-tooltip.tooltip-custom[x-placement^="top"] .tooltip-arrow {
4449
border-top-color: red;
4550
}
4651

47-
.vue-tooltip.tooltip-custom[x-placement^="bottom"] [x-arrow] {
52+
.vue-tooltip.tooltip-custom[x-placement^="bottom"] .tooltip-arrow {
4853
border-bottom-color: red;
4954
}
5055

51-
.vue-tooltip.tooltip-custom[x-placement^="left"] [x-arrow] {
56+
.vue-tooltip.tooltip-custom[x-placement^="left"] .tooltip-arrow {
5257
border-left-color: red;
5358
}
5459

55-
.vue-tooltip.tooltip-custom[x-placement^="right"] [x-arrow] {
60+
.vue-tooltip.tooltip-custom[x-placement^="right"] .tooltip-arrow {
5661
border-right-color: red;
5762
}
5863
</style>
@@ -86,6 +91,35 @@ <h4>With tag directly in the page</h4>
8691
</code></pre>
8792
</p>
8893
</section>
94+
95+
<section>
96+
<h3>Content</h3>
97+
98+
<h4>Basic</h4>
99+
<p>
100+
Simple way <span class="tooltip-target" v-tooltip="'simple way'">to set text</span>
101+
<code>&lt;span v-tooltip="'simple way'"...</code>
102+
</p>
103+
104+
<h4>Object format</h4>
105+
<p>
106+
"Option" way <span class="tooltip-target" v-tooltip="{ content: 'option way' }">to set text</span>
107+
<code>&lt;span v-tooltip="{ content: 'option way' }"...</code>
108+
</p>
109+
110+
<h4>Referencing an HTMLElement</h4>
111+
<p>
112+
<span class="tooltip-target" v-tooltip="{ html: 'tooltipContent' }">to target an html element</span>
113+
<pre><code>
114+
&lt;span v-tooltip="{ html: 'id-of-html-content' }"...
115+
116+
// somewhere else in your component
117+
118+
&lt;div id="id-of-html-content"&gt;My great content&lt;/div&gt;
119+
</code></pre>
120+
</p>
121+
</section>
122+
89123
<section>
90124
<h3>Positioning</h3>
91125
<p>
@@ -105,33 +139,61 @@ <h3>Positioning</h3>
105139
<code>&lt;span v-tooltip.left="'I am on the left'"...</code>
106140
</p>
107141
</section>
142+
108143
<section>
109-
<h3>Options</h3>
144+
<h3>Events</h3>
110145

111-
<h4>Content</h4>
112146
<p>
113-
Simple way <span class="tooltip-target" v-tooltip="'simple way'">to set text</span>
114-
<code>&lt;span v-tooltip="'simple way'"...</code>
147+
There are several options to trigger the display of the tooltip:
115148
</p>
116149
<p>
117-
"Option" way <span class="tooltip-target" v-tooltip="{ content: 'option way' }">to set text</span>
118-
<code>&lt;span v-tooltip="{ content: 'option way' }"...</code>
150+
you can use a combination of these keywords: <strong>click, hover, focus</strong>
119151
</p>
120-
121-
<h4>Visibility</h4>
122152
<p>
123-
In case you need to hide a tooltip, you can use the <b class="tooltip-target" v-tooltip.top="{ content: 'change the visibility', visible: visibility }">visible</b> option
153+
Click <span class="tooltip-target" v-tooltip.click="{ content: 'show on click' }">to see the text</span>
124154
</p>
125155
<p>
126-
<code>&lt;span v-tooltip="{ content: 'change the visibility', visible: <span v-text="visibility"></span> }"...</code>
156+
<code>&lt;span v-tooltip.click="{ content: 'Show on: click' }"...</code><br>
157+
<code>&lt;span v-tooltip.focus.hover="{ content: 'Show on: focus, hover' }"...</code>
127158
</p>
159+
<p>
160+
Click to open AND close <span class="tooltip-target" v-tooltip.click.manual="{ content: 'show/hide on click' }">(here is the tooltip)</span>
161+
<code>&lt;span v-tooltip.click.manual="{ content: 'Show on click' }"...</code>
162+
</p>
163+
</section>
164+
165+
<section>
166+
<h3>Options</h3>
167+
168+
<h4>Visibility</h4>
128169
<p>
129170
<button @click="visibility = !visibility">
130171
<span v-if="visibility">hide</span>
131172
<span v-else>show</span>
132173
tooltip
133174
</button>
134175
</p>
176+
<p>
177+
In case you need to toggle a tooltip's visibility, you can use the <b class="tooltip-target" v-tooltip.top="{ content: 'change the visibility', visible: visibility }">visible</b> option
178+
</p>
179+
<p>
180+
<code>&lt;span v-tooltip="{ content: 'change the visibility', visible: <span v-text="visibility"></span> }"...</code>
181+
</p>
182+
<p>
183+
Toggle visibility AND disable triggers (hover, click, focus) <b class="tooltip-target" v-tooltip.top.notrigger="{ content: 'change the visibility', visible: visibility }">visible</b> option
184+
</p>
185+
<p>
186+
<code>&lt;span v-tooltip.notrigger="{ content: 'change the visibility', visible: <span v-text="visibility"></span> }"...</code>
187+
</p>
188+
189+
<h4>Tooltip offset</h4>
190+
<p>
191+
To change the offset of the tooltip relative to it's element:
192+
<b class="tooltip-target" v-tooltip.top="{ content: 'let\'s offset this', offset: 100 }">offset by 10px</b> option
193+
</p>
194+
<p>
195+
<code>&lt;span v-tooltip="{ content: 'let\'s offset this', offset: 10 }"...</code>
196+
</p>
135197

136198
<h4>Custom CSS classes</h4>
137199
<p>
@@ -147,26 +209,34 @@ <h4>Custom CSS classes</h4>
147209
background-color: red;
148210
}
149211

150-
.vue-tooltip.tooltip-custom[x-placement^="top"] [x-arrow] {
212+
.vue-tooltip.tooltip-custom[x-placement^="top"] .tooltip-arrow {
151213
border-top-color: red;
152214
}
153215

154-
.vue-tooltip.tooltip-custom[x-placement^="bottom"] [x-arrow] {
216+
.vue-tooltip.tooltip-custom[x-placement^="bottom"] .tooltip-arrow {
155217
border-bottom-color: red;
156218
}
157219

158-
.vue-tooltip.tooltip-custom[x-placement^="left"] [x-arrow] {
220+
.vue-tooltip.tooltip-custom[x-placement^="left"] .tooltip-arrow {
159221
border-left-color: red;
160222
}
161223

162-
.vue-tooltip.tooltip-custom[x-placement^="right"] [x-arrow] {
224+
.vue-tooltip.tooltip-custom[x-placement^="right"] .tooltip-arrow {
163225
border-right-color: red;
164226
}
165227
</code></pre>
166228
</p>
167229
</section>
168230
</div>
169231

232+
<div id="tooltipContent" class="tooltip-content">
233+
<p>Let's use some HTML in this tooltip</p>
234+
<ol>
235+
<li>set <strong>v-tooltip</strong> with the <strong>html</strong> attribute</li>
236+
<li><strong>html</strong> should be the <strong>id</strong> attribute of the html element you want to refer</li>
237+
</ol>
238+
</div>
239+
170240
<script>
171241
new Vue({ el: '#app', data() {
172242
return {

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-directive-tooltip",
3-
"version": "1.0.5",
3+
"version": "1.1.0",
44
"description": "Vue.js tooltip directive ",
55
"main": "cjs/index.js",
66
"browser": "dist/vueDirectiveTooltip.js",

‎src/css/index.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ $popper-background-color: #000 !default;
44
background-color: $popper-background-color;
55
box-sizing: border-box;
66
color: #fff;
7-
min-width: 120px;
7+
// min-width: 120px;
88
max-width: 320px;
99
padding: 6px 10px;
1010
border-radius: 3px;
@@ -29,7 +29,7 @@ $popper-background-color: #000 !default;
2929
// }
3030
// }
3131

32-
[x-arrow] {
32+
.tooltip-arrow {
3333
content: '';
3434
width: 0;
3535
height: 0;
@@ -41,7 +41,7 @@ $popper-background-color: #000 !default;
4141
&[x-placement^="top"] {
4242
margin-bottom: 5px;
4343

44-
[x-arrow] {
44+
.tooltip-arrow {
4545
border-width: 5px 5px 0 5px;
4646
border-color: $popper-background-color transparent transparent transparent;
4747
bottom: -5px;
@@ -53,7 +53,7 @@ $popper-background-color: #000 !default;
5353
&[x-placement^="bottom"] {
5454
margin-top: 5px;
5555

56-
[x-arrow] {
56+
.tooltip-arrow {
5757
border-width: 0 5px 5px 5px;
5858
border-color: transparent transparent $popper-background-color transparent;
5959
top: -5px;
@@ -65,7 +65,7 @@ $popper-background-color: #000 !default;
6565
&[x-placement^="right"] {
6666
margin-left: 5px;
6767

68-
[x-arrow] {
68+
.tooltip-arrow {
6969
border-width: 5px 5px 5px 0;
7070
border-color: transparent $popper-background-color transparent transparent;
7171
left: -5px;
@@ -77,7 +77,7 @@ $popper-background-color: #000 !default;
7777
&[x-placement^="left"] {
7878
margin-right: 5px;
7979

80-
[x-arrow] {
80+
.tooltip-arrow {
8181
border-width: 5px 0 5px 5px;
8282
border-color: transparent transparent transparent $popper-background-color;
8383
right: -5px;

0 commit comments

Comments
 (0)