File tree Expand file tree Collapse file tree 1 file changed +21
-1
lines changed Expand file tree Collapse file tree 1 file changed +21
-1
lines changed Original file line number Diff line number Diff line change @@ -53,12 +53,18 @@ Vue.directive('my-tooltip', VTooltip.VTooltip)
5353
5454# Usage
5555
56- In the template:
56+ In the template, use the ` v-tooltip ` directive :
5757
5858``` html
5959<button v-tooltip =" 'You have ' + count + ' new messages.'" >
6060```
6161
62+ Of course, you can use a reactive property:
63+
64+ ``` html
65+ <button v-tooltip =" tooltipContent" >
66+ ```
67+
6268You can specify the tooltip position as a modifier:
6369
6470``` html
@@ -67,6 +73,14 @@ You can specify the tooltip position as a modifier:
6773
6874See the available positions in the [ tether-tooltip documentation] ( http://github.hubspot.com/tooltip/#changing-the-positioning ) .
6975
76+ ## Object notation
77+
78+ You can use an object instead of a simple string:
79+
80+ ``` html
81+ <button v-tooltip =" { content: 'You have ' + count + ' new messages.' }" >
82+ ```
83+
7084## Dynamic CSS classes
7185
7286You can set the tooltip css classes dynamically with the object notation:
@@ -95,7 +109,11 @@ The default global options are:
95109
96110``` javascript
97111{
112+ // Applied to the tooltip element
113+ // (replaced by the `classes` option of the object notation)
98114 defaultClass: ' vue-tooltip-theme' ,
115+
116+ // Any valid tether option.
99117 tetherOptions: {
100118 constraints: [
101119 {
@@ -120,6 +138,8 @@ Or directly on the directive definition:
120138VTooltip .options .defaultClass = ' my-tooltip'
121139```
122140
141+ See the [ tether documentation] ( http://tether.io/ ) for more info on ` tetherOptions ` .
142+
123143# Example Style
124144
125145## Sass / Less
You can’t perform that action at this time.
0 commit comments