Skip to content
Snippets Groups Projects
Commit 31d10706 authored by Guillaume Chau's avatar Guillaume Chau
Browse files

docs: wip miration to v3.0

parent 55d0cde5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
docs-src/App.vue
+ 30
− 133
View file @ 31d10706
......@@ -2,16 +2,20 @@
<div id="app">
<header>
<h1>v-tooltip</h1>
<div class="command">npm install --save v-tooltip</div>
<div class="command">
npm install --save v-tooltip
</div>
<nav>
<a href="https://github.com/Akryum/vue-tooltip"><img src="https://img.shields.io/github/stars/Akryum/vue-tooltip.svg?style=social&label=Star" /></a>
<a href="https://github.com/Akryum/vue-tooltip"><img src="https://img.shields.io/github/stars/Akryum/vue-tooltip.svg?style=social&label=Star"></a>
<a href="https://www.npmjs.com/package/v-tooltip">
<img src="https://img.shields.io/npm/v/v-tooltip.svg" />
<img src="https://img.shields.io/npm/dm/v-tooltip.svg" />
<img src="https://img.shields.io/npm/v/v-tooltip.svg">
<img src="https://img.shields.io/npm/dm/v-tooltip.svg">
</a>
<a href="https://vuejs.org/"><img src="https://img.shields.io/badge/vue-2.0-orange.svg" /></a>
<a href="https://vuejs.org/"><img src="https://img.shields.io/badge/vue-2.0-orange.svg"></a>
</nav>
<div class="description">Customizable &amp; reactive tooltips/popovers/dropdowns with smart positioning</div>
<div class="description">
Customizable &amp; reactive tooltips/popovers/dropdowns with smart positioning
</div>
</header>
<router-view />
......@@ -24,7 +28,6 @@
</div>
</template>
<style lang="scss">
body {
background: white;
......@@ -174,143 +177,37 @@ label input {
margin-bottom: 12px;
}
.tooltip {
display: block !important;
z-index: 10000;
.v-popper--theme-info-tooltip {
$color: rgba(#004499, .9);
.tooltip-inner {
background: black;
.v-popper__inner {
background: $color;
color: white;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
}
&[x-placement^="top"] {
margin-bottom: 5px;
.tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^="bottom"] {
margin-top: 5px;
.tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^="right"] {
margin-left: 5px;
.tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&[x-placement^="left"] {
margin-right: 5px;
.tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
&:not(.no-transition) {
transition: opacity .15s, visibility .15s;
}
}
&[aria-hidden='false'] {
visibility: visible;
opacity: 1;
&:not(.no-transition) {
transition: opacity .15s;
}
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
max-width: 250px;
}
&.info {
$color: rgba(#004499, .9);
.tooltip-inner {
background: $color;
color: white;
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
max-width: 250px;
}
.tooltip-arrow {
border-color: $color;
}
.v-popper__arrow {
border-color: $color;
}
}
&.popover {
$color: #f9f9f9;
.popover-inner {
background: $color;
color: black;
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
}
.popover-arrow {
border-color: $color;
}
.v-popper--tooltip-loading {
.v-popper__inner {
color: #77aaff;
}
}
&.tooltip-loading {
.tooltip-inner {
color: #77aaff;
}
.v-popper--theme-dropdown {
.v-popper__inner {
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
}
}
.v-popover {
.v-popper {
&.inline {
display: inline-block;
&:not(:last-child) {
......
docs-src/PageHome.vue
+ 62
− 160
View file @ 31d10706
......@@ -27,7 +27,7 @@
<button
v-tooltip.top-center="msg"
class="tooltip-target"
title="This is a button"
title="Fallback title"
>
Hover me
</button>
......@@ -50,14 +50,6 @@
:code="componentSnippet1"
lang="html"
/>
<div class="plus">
+
</div>
<CodeSnippet
class="snippet"
:code="styleSnippet1"
lang="scss"
/>
</div>
</Collapse>
</section>
......@@ -86,14 +78,10 @@
<button
v-tooltip="{
content: 'You can change a lot of parameters: placement, classes, offset, delay...',
theme: 'info-tooltip',
// Inline override
placement,
classes: ['info'],
targetClasses: ['it-has-a-tooltip'],
offset: 100,
delay: {
show: 500,
hide: 300,
},
}"
class="tooltip-target b2"
>
......@@ -105,6 +93,14 @@
<section class="snippets">
<Collapse title="Show code">
<div class="section-content">
<CodeSnippet
class="snippet"
:code="mainSnippet2"
lang="js"
/>
<div class="plus">
+
</div>
<CodeSnippet
class="snippet"
:code="componentSnippet2"
......@@ -167,7 +163,7 @@
v-model="isVisible"
type="checkbox"
name="open"
> Enable</label>
> Parent visible</label>
</div>
<template v-if="isVisible">
......@@ -222,7 +218,7 @@
v-model="isEnabled"
type="checkbox"
name="enabled"
> Enable</label>
> Enabled</label>
<label><input
v-model="isAutoHiding"
......@@ -394,7 +390,7 @@
v-model="isVisible"
type="checkbox"
name="open"
> Enable</label>
> Parent visible</label>
</div>
<template v-if="isVisible">
......@@ -473,137 +469,56 @@ new Vue({
`
const componentSnippet1 = `
<button v-tooltip.top-center="msg">Hover me</button>
<button
v-tooltip.top-center="msg"
title="Fallback title"
>
Hover me
</button>
`
const styleSnippet1 = `
.tooltip {
display: block !important;
z-index: 10000;
.tooltip-inner {
background: black;
color: white;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
z-index: 1;
}
&[x-placement^="top"] {
margin-bottom: 5px;
.tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^="bottom"] {
margin-top: 5px;
.tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^="right"] {
margin-left: 5px;
.tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&[x-placement^="left"] {
margin-right: 5px;
.tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
const mainSnippet2 = `
Vue.use(VTooltip, {
themes: {
'info-tooltip': {
$extend: 'tooltip',
delay: {
show: 800,
hide: 500
}
}
}
&[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
&[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
}
})
`
const componentSnippet2 = `
<button v-tooltip="{
content: msg,
placement: 'bottom',
classes: ['info'],
targetClasses: ['it-has-a-tooltip'],
offset: 100,
delay: {
show: 500,
hide: 300,
},
}">Hover me</button>`
<button
v-tooltip="{
content: 'You can change a lot of parameters: placement, classes, offset, delay...',
theme: 'info-tooltip',
// Inline override
placement,
offset: 100,
}"
>
Hover me
</button>`
const styleSnippet2 = `
.tooltip {
// ...
&.info {
$color: rgba(#004499, .9);
.v-popper--theme-info-tooltip {
$color: rgba(#004499, .9);
.tooltip-inner {
background: $color;
color: white;
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
max-width: 250px;
}
.v-popper__inner {
background: $color;
color: white;
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
max-width: 250px;
}
.tooltip-arrow {
border-color: $color;
}
.v-popper__arrow {
border-color: $color;
}
}
`
......@@ -613,7 +528,7 @@ const componentSnippet3 = `
offset="16"
:disabled="!isEnabled"
>
<button class="tooltip-target b3">Click me</button>
<button>Click me</button>
<template #popper>
<input class="tooltip-content" v-model="msg" placeholder="Tooltip content" />
......@@ -629,30 +544,17 @@ const componentSnippet3 = `
`
const styleSnippet3 = `
.tooltip {
// ...
&.popover {
$color: #f9f9f9;
.popover-inner {
background: $color;
color: black;
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
}
.popover-arrow {
border-color: $color;
}
.v-popper--theme-dropdown {
.v-popper__inner {
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
}
}
`
const componentSnippet4 = `
<div class="form">
<label><input type="checkbox" name="open" v-model="isVisible" /> Enable</label>
<label><input type="checkbox" name="open" v-model="isVisible" /> Parent visible</label>
</div>
<template v-if="isVisible">
......@@ -667,7 +569,7 @@ const componentSnippet4 = `
offset="16"
:auto-hide="false"
>
<button class="tooltip-target b1">Target</button>
<button>Target</button>
<template #popper>
<input class="tooltip-content" v-model="msg" placeholder="Tooltip content" />
......@@ -681,7 +583,7 @@ const componentSnippet4 = `
const componentSnippet5 = `
<div class="form">
<label><input type="checkbox" name="open" v-model="isVisible" /> Enable</label>
<label><input type="checkbox" name="open" v-model="isVisible" /> Parent visible</label>
</div>
<template v-if="isVisible">
......@@ -769,7 +671,7 @@ export default {
offset: 16,
mainSnippet,
componentSnippet1,
styleSnippet1,
mainSnippet2,
componentSnippet2,
styleSnippet2,
componentSnippet3,
......
docs-src/main.js
+ 8
− 0
View file @ 31d10706
......@@ -19,6 +19,14 @@ Vue.use(VTooltip, {
},
},
},
// Custom theme
'info-tooltip': {
$extend: 'tooltip',
delay: {
show: 800,
hide: 500,
},
},
},
})
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment