Skip to content

Commit b82c880

Browse files
author
Guillaume Chau
committed
Updated demos
1 parent 67ad91b commit b82c880

File tree

6 files changed

+322
-23
lines changed

6 files changed

+322
-23
lines changed

‎demo-src/src/App.vue‎

Lines changed: 229 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,45 @@
1616

1717
<section class="demo">
1818
<div class="section-content">
19+
<h2>Reactive content</h2>
1920
<input class="tooltip-content" v-model="msg" placeholder="Tooltip content" />
2021

2122
<button class="tooltip-target" v-tooltip.top-center="msg">Hover me</button>
2223
</div>
2324
</section>
2425

2526
<section class="snippets">
27+
<Collapse title="Show code">
28+
<div class="section-content">
29+
<CodeSnippet class="snippet" :code="mainSnippet" lang="js"/>
30+
<div class="plus">+</div>
31+
<CodeSnippet class="snippet" :code="componentSnippet1" lang="html"/>
32+
<div class="plus">+</div>
33+
<CodeSnippet class="snippet" :code="styleSnippet1" lang="scss"/>
34+
</div>
35+
</Collapse>
36+
</section>
37+
38+
<section class="demo">
2639
<div class="section-content">
27-
<code-snippet class="snippet" :code="mainSnippet" lang="js"></code-snippet>
28-
<div class="plus">+</div>
29-
<code-snippet class="snippet" :code="componentSnippet" lang="html"></code-snippet>
30-
<div class="plus">+</div>
31-
<code-snippet class="snippet" :code="styleSnippet" lang="scss"></code-snippet>
40+
<h2>With dynamic classes</h2>
41+
<button class="tooltip-target" v-tooltip="{ content: msg, position: 'top-center', classes: ['danger'] }">Hover me</button>
42+
</div>
43+
</section>
44+
45+
<section class="snippets">
46+
<Collapse title="Show code">
47+
<div class="section-content">
48+
<CodeSnippet class="snippet" :code="componentSnippet2" lang="html"/>
49+
<div class="plus">+</div>
50+
<CodeSnippet class="snippet" :code="styleSnippet2" lang="scss"/>
51+
</div>
52+
</Collapse>
53+
</section>
54+
55+
<section class="more">
56+
<div class="section-content">
57+
And much <a href="https://github.com/Akryum/v-tooltip#usage">More</a>!
3258
</div>
3359
</section>
3460

@@ -37,6 +63,7 @@
3763

3864
<script>
3965
import CodeSnippet from './CodeSnippet.vue'
66+
import Collapse from './Collapse.vue'
4067
4168
const mainSnippet = `
4269
import Vue from 'vue'
@@ -51,14 +78,13 @@ new Vue({
5178
})
5279
`
5380
54-
const componentSnippet = `
81+
const componentSnippet1 = `
5582
<button v-tooltip.top-center="msg">Hover me</button>
5683
`
5784
58-
const styleSnippet = `
85+
const styleSnippet1 = `
5986
.tooltip {
6087
display: block !important;
61-
padding: 4px;
6288
z-index: 10000;
6389
6490
.tooltip-inner {
@@ -69,7 +95,72 @@ const styleSnippet = `
6995
}
7096
7197
.tooltip-arrow {
72-
display: none;
98+
width: 0;
99+
height: 0;
100+
border-style: solid;
101+
position: absolute;
102+
margin: 5px;
103+
border-color: black;
104+
}
105+
106+
&[x-placement^="top"] {
107+
margin-bottom: 5px;
108+
109+
.tooltip-arrow {
110+
border-width: 5px 5px 0 5px;
111+
border-left-color: transparent !important;
112+
border-right-color: transparent !important;
113+
border-bottom-color: transparent !important;
114+
bottom: -5px;
115+
left: calc(50% - 5px);
116+
margin-top: 0;
117+
margin-bottom: 0;
118+
}
119+
}
120+
121+
&[x-placement^="bottom"] {
122+
margin-top: 5px;
123+
124+
.tooltip-arrow {
125+
border-width: 0 5px 5px 5px;
126+
border-left-color: transparent !important;
127+
border-right-color: transparent !important;
128+
border-top-color: transparent !important;
129+
top: -5px;
130+
left: calc(50% - 5px);
131+
margin-top: 0;
132+
margin-bottom: 0;
133+
}
134+
}
135+
136+
&[x-placement^="right"] {
137+
margin-left: 5px;
138+
139+
.tooltip-arrow {
140+
border-width: 5px 5px 5px 0;
141+
border-left-color: transparent !important;
142+
border-top-color: transparent !important;
143+
border-bottom-color: transparent !important;
144+
left: -5px;
145+
top: calc(50% - 5px);
146+
margin-left: 0;
147+
margin-right: 0;
148+
}
149+
}
150+
151+
&[x-placement^="left"] {
152+
margin-right: 5px;
153+
154+
.tooltip-arrow {
155+
border-width: 5px 0 5px 5px;
156+
border-top-color: transparent !important;
157+
border-right-color: transparent !important;
158+
border-bottom-color: transparent !important;
159+
right: -5px;
160+
top: calc(50% - 5px);
161+
margin-left: 0;
162+
margin-right: 0;
163+
}
73164
}
74165
75166
&[aria-hidden='true'] {
@@ -86,17 +177,42 @@ const styleSnippet = `
86177
}
87178
`
88179
180+
const componentSnippet2 = `
181+
<button v-tooltip="{
182+
content: msg,
183+
position: 'top-center',
184+
classes: ['danger'],
185+
}">Hover me</button>`
186+
187+
const styleSnippet2 = `
188+
.tooltip {
189+
&.danger {
190+
.tooltip-inner {
191+
background: #ee8888;
192+
color: black;
193+
}
194+
195+
.tooltip-arrow {
196+
border-color: #ee8888;
197+
}
198+
}
199+
}
200+
`
201+
89202
export default {
90203
name: 'app',
91204
components: {
92205
CodeSnippet,
206+
Collapse,
93207
},
94208
data () {
95209
return {
96210
msg: `This is a button.`,
97211
mainSnippet,
98-
componentSnippet,
99-
styleSnippet,
212+
componentSnippet1,
213+
styleSnippet1,
214+
componentSnippet2,
215+
styleSnippet2,
100216
}
101217
},
102218
}
@@ -124,20 +240,34 @@ header {
124240
125241
section {
126242
.section-content {
127-
max-width: 500px;
243+
max-width: 560px;
128244
margin: auto;
129245
padding: 64px 0;
130246
box-sizing: border-box;
131247
}
132248
}
133249
250+
.collapse {
251+
.section-content {
252+
padding: 12px 0 64px 0;
253+
}
254+
}
255+
134256
h1 {
135257
color: white;
136258
font-weight: normal;
137259
text-align: center;
138260
margin: 0 0 32px;
139261
}
140262
263+
h2 {
264+
&:first-child {
265+
margin-top: 0;
266+
}
267+
268+
font-weight: normal;
269+
}
270+
141271
a {
142272
color: $primary-color;
143273
text-decoration: none;
@@ -159,15 +289,16 @@ input {
159289
}
160290
161291
button {
162-
background: $primary-color;
163-
color: white;
292+
color: $md-grey;
293+
background: white;
294+
border: solid 2px $md-grey;
164295
cursor: pointer;
165296
display: inline-block;
166297
text-align: center;
167298
transition: background .3s;
168299
169300
&:hover {
170-
background: lighten($primary-color, 10%);
301+
background: lighten($md-grey, 30%);
171302
}
172303
}
173304
@@ -188,7 +319,6 @@ input {
188319
189320
.tooltip {
190321
display: block !important;
191-
padding: 4px;
192322
z-index: 10000;
193323
194324
.tooltip-inner {
@@ -199,7 +329,72 @@ input {
199329
}
200330
201331
.tooltip-arrow {
202-
display: none;
332+
width: 0;
333+
height: 0;
334+
border-style: solid;
335+
position: absolute;
336+
margin: 5px;
337+
border-color: black;
338+
}
339+
340+
&[x-placement^="top"] {
341+
margin-bottom: 5px;
342+
343+
.tooltip-arrow {
344+
border-width: 5px 5px 0 5px;
345+
border-left-color: transparent !important;
346+
border-right-color: transparent !important;
347+
border-bottom-color: transparent !important;
348+
bottom: -5px;
349+
left: calc(50% - 5px);
350+
margin-top: 0;
351+
margin-bottom: 0;
352+
}
353+
}
354+
355+
&[x-placement^="bottom"] {
356+
margin-top: 5px;
357+
358+
.tooltip-arrow {
359+
border-width: 0 5px 5px 5px;
360+
border-left-color: transparent !important;
361+
border-right-color: transparent !important;
362+
border-top-color: transparent !important;
363+
top: -5px;
364+
left: calc(50% - 5px);
365+
margin-top: 0;
366+
margin-bottom: 0;
367+
}
368+
}
369+
370+
&[x-placement^="right"] {
371+
margin-left: 5px;
372+
373+
.tooltip-arrow {
374+
border-width: 5px 5px 5px 0;
375+
border-left-color: transparent !important;
376+
border-top-color: transparent !important;
377+
border-bottom-color: transparent !important;
378+
left: -5px;
379+
top: calc(50% - 5px);
380+
margin-left: 0;
381+
margin-right: 0;
382+
}
383+
}
384+
385+
&[x-placement^="left"] {
386+
margin-right: 5px;
387+
388+
.tooltip-arrow {
389+
border-width: 5px 0 5px 5px;
390+
border-top-color: transparent !important;
391+
border-right-color: transparent !important;
392+
border-bottom-color: transparent !important;
393+
right: -5px;
394+
top: calc(50% - 5px);
395+
margin-left: 0;
396+
margin-right: 0;
397+
}
203398
}
204399
205400
&[aria-hidden='true'] {
@@ -213,6 +408,17 @@ input {
213408
opacity: 1;
214409
transition: opacity .15s;
215410
}
411+
412+
&.danger {
413+
.tooltip-inner {
414+
background: #ee8888;
415+
color: black;
416+
}
417+
418+
.tooltip-arrow {
419+
border-color: #ee8888;
420+
}
421+
}
216422
}
217423
218424
.command {
@@ -264,4 +470,10 @@ input {
264470
}
265471
}
266472
473+
.more {
474+
font-size: 24px;
475+
text-align: center;
476+
background: lighten($primary-color, 45%);
477+
}
478+
267479
</style>

‎demo-src/src/CodeSnippet.vue‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<div class="code-snippet">
3+
<div class="language">{{ lang }}</div>
34
<div class="line-numbers">
45
<div class="line-number" v-for="n in lineCount">{{ n }}</div>
56
</div>
@@ -47,10 +48,10 @@ export default {
4748
overflow: auto;
4849
border-bottom: solid 2px $md-grey-300;
4950
border-right: solid 1px $md-grey-100;
50-
// box-shadow: 0 10px 30px rgba(black, .05);
51+
position: relative;
5152
5253
.line-numbers, .render {
53-
padding: 12px;
54+
padding: 32px 24px;
5455
}
5556
5657
.line-numbers {
@@ -62,5 +63,15 @@ export default {
6263
.render {
6364
white-space: pre;
6465
}
66+
67+
.language {
68+
position: absolute;
69+
top: 0;
70+
right: 0;
71+
background: $md-grey-200;
72+
color: $md-grey-400;
73+
padding: 4px 4px 6px 6px;
74+
border-radius: 0 0 0 2px;
75+
}
6576
}
6677
</style>

0 commit comments

Comments
 (0)