Skip to content

Commit 09a9ef7

Browse files
committed
Readme cleanup and improvement.
1 parent 37a5268 commit 09a9ef7

File tree

1 file changed

+61
-14
lines changed

1 file changed

+61
-14
lines changed

README.md

Lines changed: 61 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,49 @@ A jQuery plugin that creates hover tooltips.
44

55
## Summary
66

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-
97
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.
108

119
### Features
1210

13-
* Straightforward implementation (just include script, a few lines of CSS and call `powerTip()`)
11+
* Straightforward implementation
1412
* Simple configuration
1513
* Supports static tooltips as well as tooltips that follow the mouse
1614
* 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
1816
* Mouse follow tooltips are constrained to the browser viewport
1917
* 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
2024

2125
### Requirements
2226

23-
* jQuery core, version 1.7 or later.
27+
* jQuery 1.7 or later
2428

2529
## Usage
2630

2731
Running the plugin is about as standard as it gets.
32+
2833
```javascript
2934
$('.tooltips').powerTip(options)
3035
```
36+
3137
Where `options` is an object with the various settings you want to override (all defined below).
3238

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+
3347
### Setting tooltip content
3448

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.
3650

3751
#### Title attribute
3852

@@ -44,32 +58,32 @@ The simplest method, as well as the only one that will continue to work for user
4458

4559
#### data-powertip
4660

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.
4862

49-
```html
50-
<a href="/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>.');
5165
```
5266

5367
or
5468

55-
```javascript
56-
$('#element').data('powertip', 'This will be the tooltip text.');
69+
```html
70+
<a href="/some/link" data-powertip="This will be the &lt;b&gt;tooltip text&lt;/b&gt;.">Some Link</a>
5771
```
5872

5973
#### data-powertipjq
6074

6175
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.
6276

6377
```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>');
6579
tooltip.on('click', function() { /* ... */ });
6680

6781
$('#element').data('powertipjq', tooltip);
6882
```
6983

7084
#### data-powertiptarget
7185

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.
7387

7488
```html
7589
<div id="myToolTip">
@@ -85,6 +99,37 @@ $('#element').data('powertiptarget', 'myToolTip');
8599

86100
## Options
87101

102+
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+
88133
| Name | Default | Type | Description |
89134
| ----- | ----- | ----- | ----- |
90135
| `followMouse` | `false` | Boolean | If set to `true` the tooltip will follow the users mouse cursor. |
@@ -99,8 +144,10 @@ $('#element').data('powertiptarget', 'myToolTip');
99144
| `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. |
100145

101146
## 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.
103147

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:
149+
150+
* [tipsy](https://github.com/jaz303/tipsy/)
104151
* [qTip2](https://github.com/Craga89/qTip2)
105152
* [TipTip](https://github.com/drewwilson/TipTip)
106153
* [clueTip](https://github.com/kswedberg/jquery-cluetip)

0 commit comments

Comments
 (0)