🔖 v1.1.0

hekigan · Jul 1, 2017 · d70cbbb · d70cbbb
1 parent 9cdbd41
commit d70cbbb
Show file tree

Hide file tree

Showing 7 changed files with 239 additions and 143 deletions.
diff --git a/README.md b/README.md
@@ -8,14 +8,7 @@
 
 ### Usage
 
-```js
-// ES6
-import Tooltip from 'vue-directive-tooltip';
-Vue.use(Tooltip);
-
-// ES5
-require('vue-directive-tooltip');
-```
+Super simple
 
 ```html
 <span v-tooltip="'my text'">some text</span>
@@ -24,57 +17,12 @@ require('vue-directive-tooltip');
 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.
 
-### Installation
-
-Install via [yarn](https://github.com/yarnpkg/yarn)
-
-	yarn add vue-directive-tooltip (--dev)
-
-or npm
-
-	npm install vue-directive-tooltip (--save-dev)
-
-
-### configuration
-
-```html
-<span v-tooltip="'my text'">some text</span>
-```
-or
-```html
-<span v-tooltip="{content: 'my text'}">some text</span>
-```
+### Documentation
 
-**modifier**
-<br/> 📝 Change the position of the tooltip
-<br/> ℹ️ options: bottom (default) | top | left | right
-<br/> 💡 example
-```html
-<span v-tooltip.top="'my text'">some text</span>
-```
-**content**
-<br/> 📝 Set the text to display
-<br/> 💡 example
-```html
-<span v-tooltip="{ content: 'my text' }">some text</span>
-```
-**class**
-<br/> 📝 Append custom CSS class
-<br/> 💡 example
-```html
-<span v-tooltip="{ class: 'custom-class other-custom-class' }">some text</span>
-```
-**visible**
-<br/> 📝 Show/hide the tooltip
-<br/> ℹ️ options: true (default) | false
-<br/> 💡 example
-```html
-<span v-tooltip="{ content: 'my text', visible: true }">some text</span>
-```
+[Full documentation with examples](https://hekigan.github.io/vue-directive-tooltip/)
 
-### Examples
+![Alt text](https://hekigan.github.io/vue-directive-tooltip/images/github-screenshot.jpg "Vue directive tooltip - screenshot")
 
-See [`example`](example/index.html) folder.
 
 ### Builds
 

diff --git a/css/index.css b/css/index.css
diff --git a/css/index.min.css b/css/index.min.css
diff --git a/example/index.html b/example/index.html
@@ -25,6 +25,7 @@
                 border: 1px solid #004edc;
                 border-radius: 3px;
                 color: #fff;
+                padding: 6px 10px;
             }
 
             button:hover {
@@ -36,23 +37,27 @@
                 text-decoration: underline;
             }
 
+            .tooltip-content {
+                color: #fff;
+            }
+
             .vue-tooltip.tooltip-custom {
                 background-color: red;
             }
 
-            .vue-tooltip.tooltip-custom[x-placement^="top"] [x-arrow] {
+            .vue-tooltip.tooltip-custom[x-placement^="top"] .tooltip-arrow {
                 border-top-color: red;
             }
 
-            .vue-tooltip.tooltip-custom[x-placement^="bottom"] [x-arrow] {
+            .vue-tooltip.tooltip-custom[x-placement^="bottom"] .tooltip-arrow {
                 border-bottom-color: red;
             }
 
-            .vue-tooltip.tooltip-custom[x-placement^="left"] [x-arrow] {
+            .vue-tooltip.tooltip-custom[x-placement^="left"] .tooltip-arrow {
                 border-left-color: red;
             }
 
-            .vue-tooltip.tooltip-custom[x-placement^="right"] [x-arrow] {
+            .vue-tooltip.tooltip-custom[x-placement^="right"] .tooltip-arrow {
                 border-right-color: red;
             }
         </style>
@@ -86,6 +91,35 @@ <h4>With tag directly in the page</h4>
                     </code></pre>
                 </p>
             </section>
+
+            <section>
+                <h3>Content</h3>
+
+                <h4>Basic</h4>
+                <p>
+                    Simple way <span class="tooltip-target" v-tooltip="'simple way'">to set text</span>
+                    <code>&lt;span v-tooltip="'simple way'"...</code>
+                </p>
+
+                <h4>Object format</h4>
+                <p>
+                    "Option" way <span class="tooltip-target" v-tooltip="{ content: 'option way' }">to set text</span>
+                    <code>&lt;span v-tooltip="{ content: 'option way' }"...</code>
+                </p>
+
+                <h4>Referencing an HTMLElement</h4>
+                <p>
+                    <span class="tooltip-target" v-tooltip="{ html: 'tooltipContent' }">to target an html element</span>
+                    <pre><code>
+&lt;span v-tooltip="{ html: 'id-of-html-content' }"...
+
+// somewhere else in your component
+
+&lt;div id="id-of-html-content"&gt;My great content&lt;/div&gt;
+                    </code></pre>
+                </p>
+            </section>
+
             <section>
                 <h3>Positioning</h3>
                 <p>
@@ -105,33 +139,61 @@ <h3>Positioning</h3>
                     <code>&lt;span v-tooltip.left="'I am on the left'"...</code>
                 </p>
             </section>
+
             <section>
-                <h3>Options</h3>
+                <h3>Events</h3>
 
-                <h4>Content</h4>
                 <p>
-                    Simple way <span class="tooltip-target" v-tooltip="'simple way'">to set text</span>
-                    <code>&lt;span v-tooltip="'simple way'"...</code>
+                    There are several options to trigger the display of the tooltip:
                 </p>
                 <p>
-                    "Option" way <span class="tooltip-target" v-tooltip="{ content: 'option way' }">to set text</span>
-                    <code>&lt;span v-tooltip="{ content: 'option way' }"...</code>
+                    you can use a combination of these keywords: <strong>click, hover, focus</strong>
                 </p>
-
-                <h4>Visibility</h4>
                 <p>
-                    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
+                    Click <span class="tooltip-target" v-tooltip.click="{ content: 'show on click' }">to see the text</span>
                 </p>
                 <p>
-                    <code>&lt;span v-tooltip="{ content: 'change the visibility', visible: <span v-text="visibility"></span> }"...</code>
+                    <code>&lt;span v-tooltip.click="{ content: 'Show on: click' }"...</code><br>
+                    <code>&lt;span v-tooltip.focus.hover="{ content: 'Show on: focus, hover' }"...</code>
                 </p>
+                <p>
+                    Click to open AND close <span class="tooltip-target" v-tooltip.click.manual="{ content: 'show/hide on click' }">(here is the tooltip)</span>
+                    <code>&lt;span v-tooltip.click.manual="{ content: 'Show on click' }"...</code>
+                </p>
+            </section>
+
+            <section>
+                <h3>Options</h3>
+
+                <h4>Visibility</h4>
                 <p>
                     <button @click="visibility = !visibility">
                         <span v-if="visibility">hide</span>
                         <span v-else>show</span>
                         tooltip
                     </button>
                 </p>
+                <p>
+                    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
+                </p>
+                <p>
+                    <code>&lt;span v-tooltip="{ content: 'change the visibility', visible: <span v-text="visibility"></span> }"...</code>
+                </p>
+                <p>
+                    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
+                </p>
+                <p>
+                    <code>&lt;span v-tooltip.notrigger="{ content: 'change the visibility', visible: <span v-text="visibility"></span> }"...</code>
+                </p>
+
+                <h4>Tooltip offset</h4>
+                <p>
+                    To change the offset of the tooltip relative to it's element:
+                    <b class="tooltip-target" v-tooltip.top="{ content: 'let\'s offset this', offset: 100 }">offset by 10px</b> option
+                </p>
+                <p>
+                    <code>&lt;span v-tooltip="{ content: 'let\'s offset this', offset: 10 }"...</code>
+                </p>
 
                 <h4>Custom CSS classes</h4>
                 <p>
@@ -147,26 +209,34 @@ <h4>Custom CSS classes</h4>
     background-color: red;
 }
 
-.vue-tooltip.tooltip-custom[x-placement^="top"] [x-arrow] {
+.vue-tooltip.tooltip-custom[x-placement^="top"] .tooltip-arrow {
     border-top-color: red;
 }
 
-.vue-tooltip.tooltip-custom[x-placement^="bottom"] [x-arrow] {
+.vue-tooltip.tooltip-custom[x-placement^="bottom"] .tooltip-arrow {
     border-bottom-color: red;
 }
 
-.vue-tooltip.tooltip-custom[x-placement^="left"] [x-arrow] {
+.vue-tooltip.tooltip-custom[x-placement^="left"] .tooltip-arrow {
     border-left-color: red;
 }
 
-.vue-tooltip.tooltip-custom[x-placement^="right"] [x-arrow] {
+.vue-tooltip.tooltip-custom[x-placement^="right"] .tooltip-arrow {
     border-right-color: red;
 }
                     </code></pre>
                 </p>
             </section>
         </div>
 
+        <div id="tooltipContent" class="tooltip-content">
+            <p>Let's use some HTML in this tooltip</p>
+            <ol>
+                <li>set <strong>v-tooltip</strong> with the <strong>html</strong> attribute</li>
+                <li><strong>html</strong> should be the <strong>id</strong> attribute of the html element you want to refer</li>
+            </ol>
+        </div>
+
         <script>
             new Vue({ el: '#app', data() {
                 return {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-directive-tooltip",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "Vue.js tooltip directive ",
   "main": "cjs/index.js",
   "browser": "dist/vueDirectiveTooltip.js",

diff --git a/src/css/index.scss b/src/css/index.scss
@@ -4,7 +4,7 @@ $popper-background-color: #000 !default;
     background-color: $popper-background-color;
     box-sizing: border-box;
     color: #fff;
-    min-width: 120px;
+    // min-width: 120px;
     max-width: 320px;
     padding: 6px 10px;
     border-radius: 3px;
@@ -29,7 +29,7 @@ $popper-background-color: #000 !default;
     //  }
     // }
 
-    [x-arrow] {
+    .tooltip-arrow {
         content: '';
         width: 0;
         height: 0;
@@ -41,7 +41,7 @@ $popper-background-color: #000 !default;
     &[x-placement^="top"] {
         margin-bottom: 5px;
 
-        [x-arrow] {
+        .tooltip-arrow {
             border-width: 5px 5px 0 5px;
             border-color: $popper-background-color transparent transparent transparent;
             bottom: -5px;
@@ -53,7 +53,7 @@ $popper-background-color: #000 !default;
     &[x-placement^="bottom"] {
         margin-top: 5px;
 
-        [x-arrow] {
+        .tooltip-arrow {
             border-width: 0 5px 5px 5px;
             border-color: transparent transparent $popper-background-color transparent;
             top: -5px;
@@ -65,7 +65,7 @@ $popper-background-color: #000 !default;
     &[x-placement^="right"] {
         margin-left: 5px;
 
-        [x-arrow] {
+        .tooltip-arrow {
             border-width: 5px 5px 5px 0;
             border-color: transparent $popper-background-color transparent transparent;
             left: -5px;
@@ -77,7 +77,7 @@ $popper-background-color: #000 !default;
     &[x-placement^="left"] {
         margin-right: 5px;
 
-        [x-arrow] {
+        .tooltip-arrow {
             border-width: 5px 0 5px 5px;
             border-color: transparent transparent transparent $popper-background-color;
             right: -5px;