4 | 
5 |
7 | 
8 |
4 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio facere asperiores architecto nostrum, fugiat excepturi incidunt eveniet provident vitae optio impedit alias eos neque illo veniam temporibus consectetur sit corporis.
32 |Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio facere asperiores architecto nostrum, fugiat excepturi incidunt eveniet provident vitae optio impedit alias eos neque illo veniam temporibus consectetur sit corporis.
60 |Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio facere asperiores architecto nostrum, fugiat excepturi incidunt eveniet provident vitae optio impedit alias eos neque illo veniam temporibus consectetur sit corporis.
33 |Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio facere asperiores architecto nostrum, fugiat excepturi incidunt eveniet provident vitae optio impedit alias eos neque illo veniam temporibus consectetur sit corporis.
61 |Maybe in the future
18 | {{ item.text }} 19 |
20 |22 | {{ item.text }} 23 |
24 |Vue Page Guide is a simple way to highlight important areas of your website quickly. 19 | Check out the Page Guide Demo to see a base implementation.
This plugin uses Popper.js to display the tooltips.
20 | Getting Started 21 | 22 | → 23 |
npm install vue-page-guide
19 | or
yarn add vue-page-guide
20 | // main.js
21 | import Vue from 'vue'
22 | import App from './App.vue'
23 | import VPageGuide from 'vue-page-guide'
24 |
25 | Vue.use(VPageGuide)
26 | Then add the VPageGuide component to your root Vue file (usually App.vue)
<!-- App.vue -->
27 | <VPageGuide v-model="showGuide"/>
28 | v-model is a boolean used to hide/show the page guide
29 | ← 30 | 31 | Introduction 32 | 33 | Usage 34 | 35 | → 36 |
target an element using the directive v-page-guide
<div
19 | id="my-awesome-el"
20 | v-page-guide="'Look at my awesome element'"
21 | >
22 | <!-- Content -->
23 | </div>
24 | WARNING
The item that you pass to the page-guide directive must be a String. 25 | If you are directly supplying the text (like above) don't forget to add single quotes 26 | as directives default to accepting js
Choose the direction of the tooltips by using a modifier on the directive.
<div
27 | id="my-awesome-el"
28 | v-page-guide.right="'This tooltip will be on the right'"
29 | >
30 | <!-- Content -->
31 | </div>
32 | TIP
If no modifier is given, the tooltip defaults to auto, allowing Popper.js to determine 33 | its placement.
34 | ← 35 | 36 | Getting Started 37 | 38 | Props 39 | 40 | → 41 |
Props are used to help control styling of the Page Guide, making it easy to pass 19 | overriding css classes if needed.
Used to control the visibility of the Page Guide
Type: Boolean
Properties you wish to apply to the targeted (v-page-guide="") element. 20 | These attributes will only be applied when the guide is visible.
Type: Object
TIP
z-index: 100 and a conditional position: relative (if element is not already absolute, sticky, or fixed) 21 | are applied automatically, you can use this prop to remove these settings or adjust them + any others
<VPageGuide
22 | v-model="showGuide"
23 | :element-display="attributes"
24 | />
25 | <!-- data () -->
26 | attributes :{
27 | zIndex: '',
28 | position: '',
29 | }
30 | Change the overlay color (pass :overlay-color=" ' ' " for no overlay)
Type: String
Default: 'rgba(0, 0, 0, 0.4)'
If you wish to use your own tooltip css, pass the class name here
Type: String
Default: 'v-page-guide__tooltip'
Elements fade in and out on Page Guide toggle by default
Type: String
Default: 'v-page-guide__fade'
31 | ← 32 | 33 | Usage 34 | 35 | CSS 36 | 37 | → 38 |
A list of all default CSS classes used. These can be overriden with by using 19 | !important or by utilizing props to pass your own custom classes.
.v-page-guide__overlay {
20 | position: fixed;
21 | top: 0;
22 | left: 0;
23 | width: 100%;
24 | height: 100%;
25 | z-index: 99;
26 | }
27 | .v-page-guide__text {
28 | margin: 0;
29 | }
30 | .v-page-guide__tooltip {
31 | position: relative;
32 | background-color: #fff;
33 | border-radius: 3px;
34 | margin: 10px;
35 | padding: 10px;
36 | z-index: 100;
37 | -webkit-filter: drop-shadow(0 10px 20px rgba(0,0,0,0.19)) drop-shadow( 0 6px 6px rgba(0,0,0,0.23));
38 | filter: drop-shadow(0 10px 20px rgba(0,0,0,0.19)) drop-shadow( 0 6px 6px rgba(0,0,0,0.23));
39 | }
40 |
41 | .v-page-guide__tooltip[x-placement^="bottom"]:after{
42 | bottom: 100%;
43 | left: 50%;
44 | border: solid transparent;
45 | content: " ";
46 | height: 0;
47 | width: 0;
48 | position: absolute;
49 | pointer-events: none;
50 | border-bottom-color: #fff;
51 | border-width: 10px;
52 | margin-left: -10px;
53 | }
54 |
55 | .v-page-guide__tooltip[x-placement^="top"]:after{
56 | top: 100%;
57 | left: 50%;
58 | border: solid transparent;
59 | content: " ";
60 | height: 0;
61 | width: 0;
62 | position: absolute;
63 | pointer-events: none;
64 | border-top-color: #fff;
65 | border-width: 10px;
66 | margin-left: -10px;
67 | }
68 |
69 | .v-page-guide__tooltip[x-placement^="left"]:after{
70 | left: 100%;
71 | top: 50%;
72 | border: solid transparent;
73 | content: " ";
74 | height: 0;
75 | width: 0;
76 | position: absolute;
77 | pointer-events: none;
78 | border-left-color: #fff;
79 | border-width: 10px;
80 | margin-top: -10px;
81 | }
82 |
83 | .v-page-guide__tooltip[x-placement^="right"]:after{
84 | right: 100%;
85 | top: 50%;
86 | border: solid transparent;
87 | content: " ";
88 | height: 0;
89 | width: 0;
90 | position: absolute;
91 | pointer-events: none;
92 | border-right-color: #fff;
93 | border-width: 10px;
94 | margin-top: -10px;
95 | }
96 | .v-page-guide__fade-enter-active, .v-page-guide__fade-leave-active {
97 | transition: opacity 0.10s ease-out;
98 | }
99 | .v-page-guide__fade-enter, .v-page-guide__fade-leave-to {
100 | opacity: 0;
101 | }
102 | 103 | ← 104 | 105 | Props 106 |