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
Copy file name to clipboardExpand all lines: README.md
+61-14Lines changed: 61 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,35 +4,49 @@ A jQuery plugin that creates hover tooltips.
4
4
5
5
## Summary
6
6
7
-
This plugin will create tooltips for you. Of course there are already about 5 million jQuery plugins that can create tooltips, but none of them had all of the features I wanted and worked the way I wanted, so I created my own. Here is yet another tooltip plugin for jQuery.
8
-
9
7
PowerTip features a very flexible design that is easy to customize, gives you a number of different ways to use the tooltips and supports adding complex data to tooltips. It is being actively developed and maintained, and provides a very fluid user experience.
10
8
11
9
### Features
12
10
13
-
* Straightforward implementation (just include script, a few lines of CSS and call `powerTip()`)
11
+
* Straightforward implementation
14
12
* Simple configuration
15
13
* Supports static tooltips as well as tooltips that follow the mouse
16
14
* Ability to let users mouse on to the tooltips and interact with their content
17
-
* Tests for hover intent (users have to hold the mouse cursor on the element before the tooltip will open)
15
+
* Tests for hover intent
18
16
* Mouse follow tooltips are constrained to the browser viewport
19
17
* Easy customization
18
+
* Smooth fade-ins and fade-outs
19
+
* Multiple instances
20
+
* Works on any type of element
21
+
* Supports complex content (markup with behavior & events)
22
+
* Small footprint (only 3kb minified)
23
+
* Actively maintained
20
24
21
25
### Requirements
22
26
23
-
* jQuery core, version 1.7 or later.
27
+
* jQuery 1.7 or later
24
28
25
29
## Usage
26
30
27
31
Running the plugin is about as standard as it gets.
32
+
28
33
```javascript
29
34
$('.tooltips').powerTip(options)
30
35
```
36
+
31
37
Where `options` is an object with the various settings you want to override (all defined below).
32
38
39
+
For example, if you want to attach tootips to all elements with the "info" class, and have those tooltip appear above and to the right of those elements you would use the following code:
40
+
41
+
```javascript
42
+
$('.info').powerTip({
43
+
placement:'ne'// north-east tooltip position
44
+
});
45
+
```
46
+
33
47
### Setting tooltip content
34
48
35
-
Generally, you probably want to set your tooltip text with the HTML title attribute on the elements themselves. This approach is very intuitive and backwards compatible. But there are several ways to specify the content.
49
+
Generally, if your tooltips are just plain text then you probably want to set your tooltip text with the HTML title attribute on the elements themselves. This approach is very intuitive and backwards compatible. But there are several ways to specify the content.
36
50
37
51
#### Title attribute
38
52
@@ -44,32 +58,32 @@ The simplest method, as well as the only one that will continue to work for user
44
58
45
59
#### data-powertip
46
60
47
-
Basically the same as tooltip, but an HTML5 data attribute. You can set this in the markup or with JavaScript at an time. It only accepts a simple string.
61
+
Basically the same as setting the title attribute, but using an HTML5 data attribute. You can set this in the markup or with JavaScript at any time. It only accepts a simple string, but that string can contain markup.
48
62
49
-
```html
50
-
<ahref="/some/link"data-powertip="This will be the tooltip text.">Some Link</a>
63
+
```javascript
64
+
$('#element').data('powertip', 'This will be the <b>tooltip text</b>.');
51
65
```
52
66
53
67
or
54
68
55
-
```javascript
56
-
$('#element').data('powertip', 'This will be the tooltip text.');
69
+
```html
70
+
<ahref="/some/link"data-powertip="This will be the <b>tooltip text</b>.">Some Link</a>
57
71
```
58
72
59
73
#### data-powertipjq
60
74
61
75
This is a data interface that will accept a jQuery object. You can create a jQuery object containing complex markup (and even events) and attach it to the element via jQuery's `.data()` method at any time.
62
76
63
77
```javascript
64
-
var tooltip =$('<div>This will be the tooltip text.</div>');
78
+
var tooltip =$('<div>This will be the tooltip text. It even has an onclick event!</div>');
65
79
tooltip.on('click', function() { /* ... */ });
66
80
67
81
$('#element').data('powertipjq', tooltip);
68
82
```
69
83
70
84
#### data-powertiptarget
71
85
72
-
You can specify the ID of an element in the DOM to pull the content from. PowerTip will replicate the markup inside of that element in the tooltip without modifying or destroying the original.
86
+
You can specify the ID of an element in the DOM to pull the content from. PowerTip will replicate the markup of that element in the tooltip without modifying or destroying the original.
The tooltip behavior is determined by a series of options that you can override. You can pass the options as an object directly to the plugin as an argument when you call it. For example:
103
+
104
+
```javascript
105
+
$('.tips').powerTip({
106
+
option1:'value',
107
+
option2:'value',
108
+
option3:'value'
109
+
});
110
+
```
111
+
112
+
The settings will only apply to those tooltips matched in the selector. This means that you can have different sets of tooltips on the same page with different options. For example:
113
+
114
+
```javascript
115
+
$('.tips').powerTip(/** options for regular tooltips **/);
116
+
117
+
$('.specialTips').powerTip(/** options for special tooltips **/);
118
+
```
119
+
120
+
You can change the default options for all tooltips by setting their values in the `$.fn.powerTip.defaults` object before you call `powerTip()`. For example:
121
+
122
+
```javascript
123
+
// change the default tooltip placement to south
124
+
$.fn.powerTip.defaults.placement='s';
125
+
126
+
$('.tips').powerTip(); // these tips will appear underneath the element
127
+
```
128
+
129
+
Of course those defaults will be overridden with any options you pass directly to the `powerTip()` call.
130
+
131
+
### List of options
132
+
88
133
| Name | Default | Type | Description |
89
134
| ----- | ----- | ----- | ----- |
90
135
|`followMouse`|`false`| Boolean | If set to `true` the tooltip will follow the users mouse cursor. |
|`intentSensitivity`|`7`| Number | Hover intent sensitivity. The tooltip will not open unless the number of pixels the mouse has moved within the `intentPollInterval` is less than this value. These default values mean that if the mouse cursor has moved 7 or more pixels in 100 milliseconds the tooltip will not open. |
100
145
101
146
## Similar Projects
102
-
There are (countless) other JavaScript tooltip projects that are worth taking a look at and may better suit your needs. Here are some of my favorites.
103
147
148
+
There are many other great JavaScript tooltip projects that are worth taking a look at and may better suit your needs. Here is a list of some of my favorite jQuery tooltip plugins:
0 commit comments