Skip to content
This repository was archived by the owner on Mar 7, 2023. It is now read-only.

Commit 5507ae1

Browse files
committed
Updated README
1 parent ff1805e commit 5507ae1

File tree

1 file changed

+51
-3
lines changed

1 file changed

+51
-3
lines changed

README.md

Lines changed: 51 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,55 @@ An [ember-cli](https://www.ember-cli.com) addon for using [Tooltipster](https://
66
----
77

88
## Installation
9-
(NPM support coming soon)
9+
(_We will be registering this as an NPM package soon. For now, pull what you need directly from GitHub. See [Git URLs as Dependencies](https://docs.npmjs.com/files/package.json#git-urls-as-dependencies)._)
1010
```
11-
npm install nsf-open/nsf-ember-tooltip#master --save-dev
12-
```
11+
npm install nsf-open/nsf-ember-tooltip#commit-ish --save-dev
12+
```
13+
14+
## Usage
15+
It's pretty simple. You provide the tooltip content, and the trigger content. The component will take care of the rest.
16+
17+
Inline form
18+
```handlebars
19+
{{-- Using positional parameters --}}
20+
{{tool-tip 'Here is some more information' 'I have a tooltip'}}
21+
22+
{{-- Equivalent with named parameters --}}
23+
{{tool-tip content='Here is some more information' text='I have a tooltip'}}
24+
25+
{{-- The title attribute may also be used to provide the tip's content --}}
26+
{{tool-tip title='Here is some more information' text='I have a tooltip'}}
27+
```
28+
29+
Block form
30+
```handlebars
31+
{{-- The component's yield block becomes the trigger --}}
32+
{{#tool-tip 'Here is some more information'}}
33+
I have a tooltip
34+
{{/tool-tip}}
35+
36+
{{-- For complex content that you do not want to create programmatically --}}
37+
{{-- you can also define the tooltip content in the block --}}
38+
{{#tool-tip}}
39+
I have a tooltip
40+
<div data-tooltip-content>
41+
<p><strong>Here is some more information</strong></p>
42+
</div>
43+
{{/tool-tip}}
44+
```
45+
(Note: using `data-tooltip-content` in the component's yield block currently has one limitation: its content cannot be re-rendered. When first created, the component detaches that element from the DOM before passing it to Tooltipster. Sorry, we're working on it!)
46+
47+
## Configuration
48+
`{{tool-tip}}` supports (almost) all of the basic options provided by Tooltipster, listed [here](https://iamceege.github.io/tooltipster/#options).
49+
50+
NOTE: We need to deviate from Tooltipster's options in one significant place - the `trigger` option. Since `trigger` is used internally by Ember components, use `tipTrigger` instead.
51+
52+
In addition, we have added:
53+
| Property | Type | Default | Description
54+
| --- | --- | --- | --- |
55+
| canTab | Boolean | true | Adds `tabindex=0` to the tooltip's trigger so it will be included in the page's tab flow. If the tooltip's trigger set to `hover`, then the tooltip will be shown on focus and hidden on blur. If the trigger is `click`, then the enter key will toggle the tooltip when the element has focus.
56+
| enabled | Boolean | true | A bound property that will enable/disable the tooltip by calling `.tooltipster('enable')` and `.tooltipster('disable')`.
57+
| showTip | Boolean | false | A bound property that may be used to programmatically show/hide the tooltip.
58+
| showTipOnUpdate | Boolean | false | If true, changes to the `content` value will cause the tooltip to be shown.
59+
| tipTextAttr | String | `"[data-tooltip-content]"` | Any valid jQuery selector that will be used to search the component's block for the tooltip's content.
60+

0 commit comments

Comments
 (0)