You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Mar 7, 2023. It is now read-only.
Copy file name to clipboardExpand all lines: README.md
+51-3Lines changed: 51 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,55 @@ An [ember-cli](https://www.ember-cli.com) addon for using [Tooltipster](https://
6
6
----
7
7
8
8
## 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)._)
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.
0 commit comments