From d70cbbbaba7ad233045d6e14499b01846124b4e8 Mon Sep 17 00:00:00 2001 From: Laurent Blanes Date: Sun, 2 Jul 2017 04:47:26 +0900 Subject: [PATCH] :bookmark: v1.1.0 --- README.md | 60 +----------- css/index.css | 2 +- css/index.min.css | 2 +- example/index.html | 106 ++++++++++++++++---- package.json | 2 +- src/css/index.scss | 12 +-- src/directives/tooltip.js | 198 ++++++++++++++++++++++++++------------ 7 files changed, 239 insertions(+), 143 deletions(-) diff --git a/README.md b/README.md index a8cdf71..f3d66d2 100644 --- 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 some text @@ -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 -some text -``` -or -```html -some text -``` +### Documentation -**modifier** -
📝 Change the position of the tooltip -
ℹī¸ options: bottom (default) | top | left | right -
💡 example -```html -some text -``` -**content** -
📝 Set the text to display -
💡 example -```html -some text -``` -**class** -
📝 Append custom CSS class -
💡 example -```html -some text -``` -**visible** -
📝 Show/hide the tooltip -
ℹī¸ options: true (default) | false -
💡 example -```html -some text -``` +[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 index 9a996b0..2adb89f 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1 @@ -.vue-tooltip{background-color:#000;box-sizing:border-box;color:#fff;min-width:120px;max-width:320px;padding:6px 10px;border-radius:3px;z-index:100;box-shadow:2px 2px 3px rgba(0,0,0,0.4)}.vue-tooltip .vue-tooltip-content{text-align:center}.vue-tooltip [x-arrow]{content:'';width:0;height:0;border-style:solid;position:absolute;margin:5px}.vue-tooltip[x-placement^="top"]{margin-bottom:5px}.vue-tooltip[x-placement^="top"] [x-arrow]{border-width:5px 5px 0 5px;border-color:#000 transparent transparent transparent;bottom:-5px;margin-top:0;margin-bottom:0}.vue-tooltip[x-placement^="bottom"]{margin-top:5px}.vue-tooltip[x-placement^="bottom"] [x-arrow]{border-width:0 5px 5px 5px;border-color:transparent transparent #000 transparent;top:-5px;margin-top:0;margin-bottom:0}.vue-tooltip[x-placement^="right"]{margin-left:5px}.vue-tooltip[x-placement^="right"] [x-arrow]{border-width:5px 5px 5px 0;border-color:transparent #000 transparent transparent;left:-5px;margin-left:0;margin-right:0}.vue-tooltip[x-placement^="left"]{margin-right:5px}.vue-tooltip[x-placement^="left"] [x-arrow]{border-width:5px 0 5px 5px;border-color:transparent transparent transparent #000;right:-5px;margin-left:0;margin-right:0} +.vue-tooltip{background-color:#000;box-sizing:border-box;color:#fff;max-width:320px;padding:6px 10px;border-radius:3px;z-index:100;box-shadow:2px 2px 3px rgba(0,0,0,0.4)}.vue-tooltip .vue-tooltip-content{text-align:center}.vue-tooltip .tooltip-arrow{content:'';width:0;height:0;border-style:solid;position:absolute;margin:5px}.vue-tooltip[x-placement^="top"]{margin-bottom:5px}.vue-tooltip[x-placement^="top"] .tooltip-arrow{border-width:5px 5px 0 5px;border-color:#000 transparent transparent transparent;bottom:-5px;margin-top:0;margin-bottom:0}.vue-tooltip[x-placement^="bottom"]{margin-top:5px}.vue-tooltip[x-placement^="bottom"] .tooltip-arrow{border-width:0 5px 5px 5px;border-color:transparent transparent #000 transparent;top:-5px;margin-top:0;margin-bottom:0}.vue-tooltip[x-placement^="right"]{margin-left:5px}.vue-tooltip[x-placement^="right"] .tooltip-arrow{border-width:5px 5px 5px 0;border-color:transparent #000 transparent transparent;left:-5px;margin-left:0;margin-right:0}.vue-tooltip[x-placement^="left"]{margin-right:5px}.vue-tooltip[x-placement^="left"] .tooltip-arrow{border-width:5px 0 5px 5px;border-color:transparent transparent transparent #000;right:-5px;margin-left:0;margin-right:0} diff --git a/css/index.min.css b/css/index.min.css index 019ef6a..554e2ff 100644 --- a/css/index.min.css +++ b/css/index.min.css @@ -1 +1 @@ -.vue-tooltip{background-color:#000;box-sizing:border-box;color:#fff;min-width:120px;max-width:320px;padding:6px 10px;border-radius:3px;z-index:1;box-shadow:2px 2px 3px rgba(0,0,0,.4)}.vue-tooltip .vue-tooltip-content{text-align:center}.vue-tooltip [x-arrow]{content:"";width:0;height:0;border-style:solid;position:absolute;margin:5px}.vue-tooltip[x-placement^=top]{margin-bottom:5px}.vue-tooltip[x-placement^=top] [x-arrow]{border-width:5px 5px 0;border-color:#000 transparent transparent;bottom:-5px;margin-top:0;margin-bottom:0}.vue-tooltip[x-placement^=bottom]{margin-top:5px}.vue-tooltip[x-placement^=bottom] [x-arrow]{border-width:0 5px 5px;border-color:transparent transparent #000;top:-5px;margin-top:0;margin-bottom:0}.vue-tooltip[x-placement^=right]{margin-left:5px}.vue-tooltip[x-placement^=right] [x-arrow]{border-width:5px 5px 5px 0;border-color:transparent #000 transparent transparent;left:-5px;margin-left:0;margin-right:0}.vue-tooltip[x-placement^=left]{margin-right:5px}.vue-tooltip[x-placement^=left] [x-arrow]{border-width:5px 0 5px 5px;border-color:transparent transparent transparent #000;right:-5px;margin-left:0;margin-right:0} \ No newline at end of file +.vue-tooltip{background-color:#000;box-sizing:border-box;color:#fff;max-width:320px;padding:6px 10px;border-radius:3px;z-index:1;box-shadow:2px 2px 3px rgba(0,0,0,.4)}.vue-tooltip .vue-tooltip-content{text-align:center}.vue-tooltip .tooltip-arrow{content:"";width:0;height:0;border-style:solid;position:absolute;margin:5px}.vue-tooltip[x-placement^=top]{margin-bottom:5px}.vue-tooltip[x-placement^=top] .tooltip-arrow{border-width:5px 5px 0;border-color:#000 transparent transparent;bottom:-5px;margin-top:0;margin-bottom:0}.vue-tooltip[x-placement^=bottom]{margin-top:5px}.vue-tooltip[x-placement^=bottom] .tooltip-arrow{border-width:0 5px 5px;border-color:transparent transparent #000;top:-5px;margin-top:0;margin-bottom:0}.vue-tooltip[x-placement^=right]{margin-left:5px}.vue-tooltip[x-placement^=right] .tooltip-arrow{border-width:5px 5px 5px 0;border-color:transparent #000 transparent transparent;left:-5px;margin-left:0;margin-right:0}.vue-tooltip[x-placement^=left]{margin-right:5px}.vue-tooltip[x-placement^=left] .tooltip-arrow{border-width:5px 0 5px 5px;border-color:transparent transparent transparent #000;right:-5px;margin-left:0;margin-right:0} \ No newline at end of file diff --git a/example/index.html b/example/index.html index a112589..80a3ad1 100644 --- 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; } @@ -86,6 +91,35 @@

With tag directly in the page

+ +
+

Content

+ +

Basic

+

+ Simple way to set text + <span v-tooltip="'simple way'"... +

+ +

Object format

+

+ "Option" way to set text + <span v-tooltip="{ content: 'option way' }"... +

+ +

Referencing an HTMLElement

+

+ to target an html element + 


+<span v-tooltip="{ html: 'id-of-html-content' }"...
+
+// somewhere else in your component
+
+<div id="id-of-html-content">My great content</div>
+
+

+
+

Positioning

@@ -105,26 +139,33 @@

Positioning

<span v-tooltip.left="'I am on the left'"...

+
-

Options

+

Events

-

Content

- Simple way to set text - <span v-tooltip="'simple way'"... + There are several options to trigger the display of the tooltip:

- "Option" way to set text - <span v-tooltip="{ content: 'option way' }"... + you can use a combination of these keywords: click, hover, focus

- -

Visibility

- In case you need to hide a tooltip, you can use the visible option + Click to see the text

- <span v-tooltip="{ content: 'change the visibility', visible: }"... + <span v-tooltip.click="{ content: 'Show on: click' }"...
+ <span v-tooltip.focus.hover="{ content: 'Show on: focus, hover' }"...

+

+ Click to open AND close (here is the tooltip) + <span v-tooltip.click.manual="{ content: 'Show on click' }"... +

+
+ +
+

Options

+ +

Visibility

+

+ In case you need to toggle a tooltip's visibility, you can use the visible option +

+

+ <span v-tooltip="{ content: 'change the visibility', visible: }"... +

+

+ Toggle visibility AND disable triggers (hover, click, focus) visible option +

+

+ <span v-tooltip.notrigger="{ content: 'change the visibility', visible: }"... +

+ +

Tooltip offset

+

+ To change the offset of the tooltip relative to it's element: + offset by 10px option +

+

+ <span v-tooltip="{ content: 'let\'s offset this', offset: 10 }"... +

Custom CSS classes

@@ -147,19 +209,19 @@

Custom CSS classes

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; } @@ -167,6 +229,14 @@

Custom CSS classes

+
+

Let's use some HTML in this tooltip

+
    +
  1. set v-tooltip with the html attribute
    2. +
  2. html should be the id attribute of the html element you want to refer
    3. +
+
+