Skip to content

Commit d23861f

Browse files
stevenbennerstevenbenner
committed
Initial commit.
0 parents  commit d23861f

File tree

7 files changed

+691
-0
lines changed

7 files changed

+691
-0
lines changed

‎.gitattributes

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto

‎LICENSE.txt

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
Copyright (c) 2012 Steven Benner, http://stevenbenner.com/
2+
3+
Permission is hereby granted, free of charge, to any person obtaining
4+
a copy of this software and associated documentation files (the
5+
"Software"), to deal in the Software without restriction, including
6+
without limitation the rights to use, copy, modify, merge, publish,
7+
distribute, sublicense, and/or sell copies of the Software, and to
8+
permit persons to whom the Software is furnished to do so, subject to
9+
the following conditions:
10+
11+
The above copyright notice and this permission notice shall be
12+
included in all copies or substantial portions of the Software.
13+
14+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# jQuery PowerTip
2+
3+
A jQuery plugin that creates hover tooltips.
4+
5+
## Summary
6+
7+
This plugin will create tooltips. 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, so I created my own. Here is yet another tooltip plugin for jQuery.
8+
9+
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+
11+
### Features
12+
13+
* Simple implementation (include JavaScript, a few lines of CSS and call `powerTip()`)
14+
* Easy configuration
15+
* Supports static tooltips as well as tooltips that follow the mouse.
16+
* Ability to let users mouse on to the tooltips and interact with their content
17+
* Test for hover intent (users have to focus their cursor on the element before the tooltip will open)
18+
* Mouse follow tooltips are constrained to the browser viewport
19+
20+
### Requirements
21+
22+
* jQuery core, version 1.7 or later.
23+
24+
## Usage
25+
26+
Running the plugin is about as standard as it gets.
27+
```javascript
28+
$('.tooltips').powerTip(options)
29+
```
30+
Where `options` is an object with the various settings you want to override (all defined below).
31+
32+
### Setting tooltip content
33+
34+
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.
35+
36+
#### Title attribute
37+
38+
The simplest method, as well as the only one that will continue to work for users who have JavaScript disabled in their browsers.
39+
40+
```html
41+
<a href="/some/link" title="This will be the tooltip text.">Some Link</a>
42+
```
43+
44+
#### data-powertip
45+
46+
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.
47+
48+
```html
49+
<a href="/some/link" data-powertip="This will be the tooltip text.">Some Link</a>
50+
```
51+
52+
or
53+
54+
```javascript
55+
$('#element').data('powertip', 'This will be the tooltip text.');
56+
```
57+
58+
#### data-powertipjq
59+
60+
This is a data interface that will accept a jQuery object. You can create complex markup and events on a jQuery object and set them via `.data` at any time.
61+
62+
```javascript
63+
var tooltip = $('<div>This will be the tooltip text.</div>');
64+
tooltip.on('click', function() { /* ... */ });
65+
66+
$('#element').data('powertip', tooltip);
67+
```
68+
69+
#### data-powertiptarget
70+
71+
Here you can specify the ID of an element in the dom to pull the content from. It will replicate the markup in the tooltip without destroying the original.
72+
73+
```html
74+
<div id="myToolTip">
75+
<p><b>Some Title</b></p>
76+
<p>This will be the tooltip text.</p>
77+
</div>
78+
```
79+
80+
```javascript
81+
$('#element').data(powertiptarget, 'myToolTip');
82+
```
83+
84+
## Options
85+
86+
| Name | Default | Type | Description |
87+
| ----- | ----- | ----- | ----- |
88+
| followMouse | false | Boolean | Should the pop follow the users mouse. |
89+
| mouseOnToPopup | false | Boolean | Allow the mouse to hover on the popup (fixed placement only). |
90+
| placement | 's' | String | Fixed placement location (n, e, s, w) |
91+
| popupId | 'powerTip' | String | HTML id attribute for the popup div. |
92+
| offset | 10 | Number | Pixel offset of popup (from mouse if followMouse is true or from object if fixed). |
93+
| fadeInTime | 200 | Number | Pop fade-in time. |
94+
| fadeOutTime | 200 | Number | Pop fade-out time. |
95+
| closeDelay | 200 | Number | Time after user leaves the hover zone before closing the pop. |
96+
| intentSensitivity | 7 | Number | Hover intent sensitivity. |
97+
| intentPollInterval | 100 | Number | Hover intent polling interval. |
98+
99+
## License
100+
101+
*(This project is released under the [MIT license](https://raw.github.com/stevenbenner/jquery-powertip/master/LICENSE.txt).)*
102+
103+
Copyright (c) 2012 Steven Benner, http://stevenbenner.com/
104+
105+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
106+
107+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
108+
109+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎examples.html

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
5+
<title>jQuery PowerTip Examples</title>
6+
<style type="text/css">
7+
* {
8+
border: 0;
9+
margin: 0;
10+
padding: 0;
11+
}
12+
13+
@font-face {
14+
font-family: 'Open Sans';
15+
font-style: normal;
16+
font-weight: 400;
17+
src: local('Open Sans'), local('OpenSans'), url('https://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
18+
}
19+
@font-face {
20+
font-family: 'Open Sans';
21+
font-style: normal;
22+
font-weight: 700;
23+
src: local('Open Sans Bold'), local('OpenSans-Bold'), url('https://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
24+
}
25+
26+
body {
27+
background-color: #FCFCFC;
28+
color: #222;
29+
font-family: 'Open Sans',arial,helvetica,sans-serif;
30+
font-size: 13px;
31+
padding: 20px;
32+
}
33+
#header {
34+
border-bottom: 1px solid #AAA;
35+
margin-bottom: 20px;
36+
padding-bottom: 20px;
37+
}
38+
body > div {
39+
margin-bottom: 60px;
40+
}
41+
#footer {
42+
border-top: 1px solid #AAA;
43+
margin-top: 20px;
44+
padding-top: 20px;
45+
}
46+
h1 {
47+
font-size: 40px;
48+
font-weight: normal;
49+
}
50+
h2 {
51+
margin-bottom: 20px;
52+
font-size: 20px;
53+
font-weight: normal;
54+
}
55+
56+
#placement-examples div {
57+
text-align: center;
58+
}
59+
#placement-examples input {
60+
margin: 10px;
61+
padding: 10px 30px;
62+
}
63+
64+
#mousefollow-examples div {
65+
background-color: #AAA;
66+
text-align: center;
67+
line-height: 400px;
68+
margin: 0 auto;
69+
height: 400px;
70+
width: 600px;
71+
}
72+
73+
#mouseon-examples div {
74+
background-color: #AAA;
75+
text-align: center;
76+
height: 75px;
77+
width: 400px;
78+
}
79+
#powerTip a {
80+
color: #00F;
81+
}
82+
</style>
83+
<link rel="stylesheet" type="text/css" href="jquery.powertip.css" />
84+
</head>
85+
<body>
86+
<div id="header">
87+
<h1>jQuery PowerTip</h1>
88+
<p>jQuery plugin that creates hover tooltips.</p>
89+
</div>
90+
<div id="placement-examples">
91+
<h2>Placement examples</h2>
92+
<div>
93+
<input type="button" id="north" value="North" title="North placement {placement: 'n'}" /><br />
94+
<input type="button" id="west" value="West" title="West placement {placement: 'w'}" />
95+
<input type="button" id="east" value="East" title="East placement {placement: 'e'}" /><br />
96+
<input type="button" id="south" value="South" title="South placement {placement: 's'}" /><br />
97+
</div>
98+
</div>
99+
<div id="mousefollow-examples">
100+
<h2>Mouse follow examples</h2>
101+
<div title="Mouse follow {followMouse: true}">
102+
The PowerTip for this box will follow the mouse.
103+
</div>
104+
</div>
105+
<div id="mouseon-examples">
106+
<h2>Mouse on to popup examples</h2>
107+
<div>
108+
The PowerTip for this box will appear on the right and you will be able to interact with its content.
109+
</div>
110+
</div>
111+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
112+
<script type="text/javascript" src="jquery.powertip.js"></script>
113+
<script type="text/javascript">
114+
$(function() {
115+
// placement examples
116+
$('#north').powerTip({placement: 'n'});
117+
$('#east').powerTip({placement: 'e'});
118+
$('#south').powerTip({placement: 's'});
119+
$('#west').powerTip({placement: 'w'});
120+
121+
// mouse follow examples
122+
$('#mousefollow-examples div').powerTip({followMouse: true});
123+
124+
// mouse-on examples
125+
$('#mouseon-examples div').data('powertipjq', $([
126+
'<p><b>Here is some content</b></p>',
127+
'<p><a href="http://stevenbenner.com/">Maybe a link</a></p>',
128+
'<p><code>{ placement: \'e\', mouseOnToPopup: true }</code></p>'
129+
].join('\n')));
130+
$('#mouseon-examples div').powerTip({
131+
placement: 'e',
132+
mouseOnToPopup: true
133+
});
134+
});
135+
</script>
136+
<div id="footer">
137+
<p id="copyright">
138+
Copyright &copy; 2012 <a href="http://stevenbenner.com/">Steven Benner</a>.
139+
</p>
140+
<p id="license">
141+
Released under the <a href="https://raw.github.com/stevenbenner/jquery-powertip/master/LICENSE.txt">MIT license</a>.
142+
</p>
143+
</div>
144+
</body>
145+
</html>

‎jquery.powertip.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/* PowerTip Plugin */
2+
#powerTip {
3+
cursor: default;
4+
background-color: #000;
5+
border: 1px solid #999;
6+
border-radius: 6px;
7+
box-shadow: 0 0 3px rgba(255, 255, 255, 0.5) inset;
8+
color: #FFF;
9+
display: none;
10+
opacity: 0.9;
11+
padding: 10px;
12+
position: absolute;
13+
z-index: 2;
14+
}

0 commit comments

Comments
 (0)