- added: hide duration delay option

- added: offset from reference option - added: possibility to change global default values - updated: documentation to reflect all changes and added examples
hekigan · Aug 21, 2017 · dc6dfc6 · dc6dfc6
1 parent 3117393
commit dc6dfc6
Show file tree

Hide file tree

Showing 14 changed files with 879 additions and 312 deletions.
diff --git a/README.md b/README.md
@@ -14,15 +14,22 @@ Super simple
 <span v-tooltip="'my text'">some text</span>
 ```
 
-It is recommended to also add the CSS file which is in the `./css/` folder.
-A SASS file is also included in the source for those who prefer fiddling.
+A **lot of options** make this tooltip convenient:
+
+- **content**: simple text or use another html tag
+- **positioning** (right, left, ...)
+- **delay** to hide (in ms)
+- **offset** (from the target in px)
+- choose from **several triggers** (hover, focus, click)
+- **full programmatic**, you choose when to show/hide the tooltip
+- and of course, use your **custom CSS** class
+
 
 ### Documentation
 
 [Full documentation with examples](https://hekigan.github.io/vue-directive-tooltip/)
 
-![Alt text](https://hekigan.github.io/vue-directive-tooltip/images/github-screenshot.jpg "Vue directive tooltip - screenshot")
-
+[<img src="https://hekigan.github.io/vue-directive-tooltip/images/github-screenshot.jpg">](https://hekigan.github.io/vue-directive-tooltip/)
 
 ### Builds
 

diff --git a/docs/.jekyll-metadata b/docs/.jekyll-metadata
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
@@ -13,8 +13,11 @@ <h1 id="logo"><a href="{{ site.baseurl }}/">Vue directive tooltip</a></h1>
         <nav id="nav">
             <ul>
                 <li><a href="#installation">Installation</a></li>
+                <li><a href="#defaults">Change default values</a></li>
                 <li><a href="#usage">Basic usage</a></li>
                 <li><a href="#positioning">Positioning</a></li>
+                <li><a href="#delay">Delay</a></li>
+                <li><a href="#offset">Offset</a></li>
                 <li><a href="#events-triggers">Events / Triggers</a></li>
                 <li><a href="#programmatic">Programmatic</a></li>
                 <li><a href="#custom-css">Custom css / class</a></li>

diff --git a/docs/_site/css/style-small.css b/docs/_site/css/style-small.css
@@ -76,7 +76,7 @@
 		}
 
 		#header > header h1 {
-			font-size: 1.5em;
+			font-size: 1.2em;
 		}
 
 		#header > header p {
@@ -93,6 +93,11 @@
 		padding: 2em 0 0 0;
 	}
 
+	/* App  */
+	#app > section {
+		margin-top: 30px;
+	}
+
 /* One */
 
 	#one:before {

diff --git a/docs/_site/css/style-xlarge.css b/docs/_site/css/style-xlarge.css
@@ -34,4 +34,9 @@
 
 	#main > section > .container {
 		padding: 4em 0 2em 0;
+	}
+
+	/* App  */
+	#app > section {
+		margin-top: 30px;
 	}
diff --git a/docs/_site/css/style.css b/docs/_site/css/style.css
@@ -945,6 +945,11 @@
 		top: 0;
 		width: 23em;
 		right: 0;
+		width: 20em;
+		max-height: 100vh;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
 	}
 
 		#header h1, #header h2, #header h3, #header h4, #header h5, #header h6 {
@@ -1025,7 +1030,7 @@
 					border: 0;
 					color: #ffffff !important;
 					display: block;
-					padding: 0.85em 0;
+					padding: 7px 0;
 					text-decoration: none;
 				}
 
@@ -1047,6 +1052,10 @@
 		margin-left: 10px;
 	}
 
+#nav {
+	overflow: auto;
+}
+
 /* Wrapper */
 
 	#wrapper {
@@ -1069,6 +1078,12 @@
 			border-top: 0;
 		}
 
+
+/* App  */
+#app > section {
+	margin-top: 50px;
+}
+
 /* installation */
 
 	#banner {

diff --git a/docs/_site/index.html b/docs/_site/index.html
@@ -47,8 +47,11 @@ <h1 id="logo"><a href="/vue-directive-tooltip/">Vue directive tooltip</a></h1>
         <nav id="nav">
             <ul>
                 <li><a href="#installation">Installation</a></li>
+                <li><a href="#defaults">Change default values</a></li>
                 <li><a href="#usage">Basic usage</a></li>
                 <li><a href="#positioning">Positioning</a></li>
+                <li><a href="#delay">Delay</a></li>
+                <li><a href="#offset">Offset</a></li>
                 <li><a href="#events-triggers">Events / Triggers</a></li>
                 <li><a href="#programmatic">Programmatic</a></li>
                 <li><a href="#custom-css">Custom css / class</a></li>
@@ -112,9 +115,44 @@ <h4>Using script tag</h4>
                 raw css: <a href="https://raw.githubusercontent.com/hekigan/vue-directive-tooltip/master/css/index.css" target="_blank">download</a>
             </p>
             <prism>
-&lt;link rel="stylesheet" href="path/to/css/vueDirectiveTooltip.css">
-&lt;script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
-&lt;script src="path/to/vueDirectiveTooltip.js"></script>
+&lt;link rel="stylesheet" href="https://unpkg.com/vue-directive-tooltip@latest/css/index.min.css"&gt;
+&lt;script src="https://unpkg.com/vue@latest/dist/vue.js">&lt;/script&gt;
+&lt;script src="https://unpkg.com/vue-directive-tooltip@latest/dist/vueDirectiveTooltip.min.js">&lt;/script&gt;
+&lt;script>Vue.use(vueDirectiveTooltip);&lt;/script&gt;
+            </prism>
+        </div>
+    </section>
+
+<!-- change defaults -->
+    <section id="defaults">
+        <div class="container">
+            <header>
+                <h3>Change global default values</h3>
+            </header>
+
+            <p>
+                Default values
+            </p>
+            <prism lang="javascript">
+{
+    delay: 200,
+    placement: 'auto',
+    class: '', // ex: 'tooltip-custom tooltip-other-custom'
+    triggers: ['hover', 'focus'],
+    offset: 5
+}
+            </prism>
+            <p>
+                If you have a need to change certain default value(s) for all tooltips:
+            </p>
+            <prism lang="javascript">
+Vue.use(vueDirectiveTooltip, {
+    delay: 500,
+    placement: 'right',
+    class: 'tooltip-red',
+    triggers: ['hover'],
+    offset: 0
+});
             </prism>
         </div>
     </section>
@@ -195,6 +233,40 @@ <h3>Positioning</h3>
         </div>
     </section>
 
+<!-- delay -->
+    <section id="delay">
+        <div class="container">
+            <header>
+                <h3>Delay</h3>
+            </header>
+
+            <p>
+                default: { delay: 200 }
+            </p>
+            <p>
+                Example: <a href="#" @click.prevent v-tooltip.right="{content:'delayed by 1 second', delay: 1000}">Delayed Tooltip</a>
+            </p>
+            <prism>&lt;span v-tooltip="{content:'delayed by 1 second', delay: 1000}">Delayed Tooltip&lt;/span></prism>
+        </div>
+    </section>
+
+<!-- offset -->
+    <section id="offset">
+        <div class="container">
+            <header>
+                <h3>Offset</h3>
+            </header>
+
+            <p>
+                default: { offset: 5 }
+            </p>
+            <p>
+                Example: <a href="#" @click.prevent v-tooltip.right="{content:'offset by 30px', offset: 30}">Offset Tooltip</a>
+            </p>
+            <prism>&lt;span v-tooltip="{content:'offset by 30px', offset: 30}">Offset Tooltip&lt;/span></prism>
+        </div>
+    </section>
+
 <!-- events/triggers -->
     <section id="events-triggers">
         <div class="container">
@@ -312,6 +384,8 @@ <h3>Custom css / class</h3>
 </div>
 
     <script>
+        Vue.use(vueDirectiveTooltip);
+
         Vue.component('Prism', {
             props: ['lang'],
             template: `<pre><code :class="language"><slot/></code></pre>`,