Skip to content

Commit 418a8fa

Browse files
committed
Better readme
1 parent d1d2133 commit 418a8fa

File tree

1 file changed

+21
-1
lines changed

1 file changed

+21
-1
lines changed

README.md

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff 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+
6268
You 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

6874
See 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

7286
You 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:
120138
VTooltip.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

0 commit comments

Comments
 (0)