-
Notifications
You must be signed in to change notification settings - Fork 138
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit d23861f
Showing
7 changed files
with
691 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
* text=auto |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
Copyright (c) 2012 Steven Benner, http://stevenbenner.com/ | ||
|
||
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: | ||
|
||
The above copyright notice and this permission notice shall be | ||
included in all copies or substantial portions of the Software. | ||
|
||
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,109 @@ | ||
# jQuery PowerTip | ||
|
||
A jQuery plugin that creates hover tooltips. | ||
|
||
## Summary | ||
|
||
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. | ||
|
||
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. | ||
|
||
### Features | ||
|
||
* Simple implementation (include JavaScript, a few lines of CSS and call `powerTip()`) | ||
* Easy configuration | ||
* Supports static tooltips as well as tooltips that follow the mouse. | ||
* Ability to let users mouse on to the tooltips and interact with their content | ||
* Test for hover intent (users have to focus their cursor on the element before the tooltip will open) | ||
* Mouse follow tooltips are constrained to the browser viewport | ||
|
||
### Requirements | ||
|
||
* jQuery core, version 1.7 or later. | ||
|
||
## Usage | ||
|
||
Running the plugin is about as standard as it gets. | ||
```javascript | ||
$('.tooltips').powerTip(options) | ||
``` | ||
Where `options` is an object with the various settings you want to override (all defined below). | ||
|
||
### Setting tooltip content | ||
|
||
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. | ||
|
||
#### Title attribute | ||
|
||
The simplest method, as well as the only one that will continue to work for users who have JavaScript disabled in their browsers. | ||
|
||
```html | ||
<a href="/some/link" title="This will be the tooltip text.">Some Link</a> | ||
``` | ||
|
||
#### data-powertip | ||
|
||
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. | ||
|
||
```html | ||
<a href="/some/link" data-powertip="This will be the tooltip text.">Some Link</a> | ||
``` | ||
|
||
or | ||
|
||
```javascript | ||
$('#element').data('powertip', 'This will be the tooltip text.'); | ||
``` | ||
|
||
#### data-powertipjq | ||
|
||
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. | ||
|
||
```javascript | ||
var tooltip = $('<div>This will be the tooltip text.</div>'); | ||
tooltip.on('click', function() { /* ... */ }); | ||
|
||
$('#element').data('powertip', tooltip); | ||
``` | ||
|
||
#### data-powertiptarget | ||
|
||
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. | ||
|
||
```html | ||
<div id="myToolTip"> | ||
<p><b>Some Title</b></p> | ||
<p>This will be the tooltip text.</p> | ||
</div> | ||
``` | ||
|
||
```javascript | ||
$('#element').data(powertiptarget, 'myToolTip'); | ||
``` | ||
|
||
## Options | ||
|
||
| Name | Default | Type | Description | | ||
| ----- | ----- | ----- | ----- | | ||
| followMouse | false | Boolean | Should the pop follow the users mouse. | | ||
| mouseOnToPopup | false | Boolean | Allow the mouse to hover on the popup (fixed placement only). | | ||
| placement | 's' | String | Fixed placement location (n, e, s, w) | | ||
| popupId | 'powerTip' | String | HTML id attribute for the popup div. | | ||
| offset | 10 | Number | Pixel offset of popup (from mouse if followMouse is true or from object if fixed). | | ||
| fadeInTime | 200 | Number | Pop fade-in time. | | ||
| fadeOutTime | 200 | Number | Pop fade-out time. | | ||
| closeDelay | 200 | Number | Time after user leaves the hover zone before closing the pop. | | ||
| intentSensitivity | 7 | Number | Hover intent sensitivity. | | ||
| intentPollInterval | 100 | Number | Hover intent polling interval. | | ||
|
||
## License | ||
|
||
*(This project is released under the [MIT license](https://raw.github.com/stevenbenner/jquery-powertip/master/LICENSE.txt).)* | ||
|
||
Copyright (c) 2012 Steven Benner, http://stevenbenner.com/ | ||
|
||
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: | ||
|
||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. | ||
|
||
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,145 @@ | ||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | ||
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> | ||
<head> | ||
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
<title>jQuery PowerTip Examples</title> | ||
<style type="text/css"> | ||
* { | ||
border: 0; | ||
margin: 0; | ||
padding: 0; | ||
} | ||
|
||
@font-face { | ||
font-family: 'Open Sans'; | ||
font-style: normal; | ||
font-weight: 400; | ||
src: local('Open Sans'), local('OpenSans'), url('https://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'); | ||
} | ||
@font-face { | ||
font-family: 'Open Sans'; | ||
font-style: normal; | ||
font-weight: 700; | ||
src: local('Open Sans Bold'), local('OpenSans-Bold'), url('https://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff') format('woff'); | ||
} | ||
|
||
body { | ||
background-color: #FCFCFC; | ||
color: #222; | ||
font-family: 'Open Sans',arial,helvetica,sans-serif; | ||
font-size: 13px; | ||
padding: 20px; | ||
} | ||
#header { | ||
border-bottom: 1px solid #AAA; | ||
margin-bottom: 20px; | ||
padding-bottom: 20px; | ||
} | ||
body > div { | ||
margin-bottom: 60px; | ||
} | ||
#footer { | ||
border-top: 1px solid #AAA; | ||
margin-top: 20px; | ||
padding-top: 20px; | ||
} | ||
h1 { | ||
font-size: 40px; | ||
font-weight: normal; | ||
} | ||
h2 { | ||
margin-bottom: 20px; | ||
font-size: 20px; | ||
font-weight: normal; | ||
} | ||
|
||
#placement-examples div { | ||
text-align: center; | ||
} | ||
#placement-examples input { | ||
margin: 10px; | ||
padding: 10px 30px; | ||
} | ||
|
||
#mousefollow-examples div { | ||
background-color: #AAA; | ||
text-align: center; | ||
line-height: 400px; | ||
margin: 0 auto; | ||
height: 400px; | ||
width: 600px; | ||
} | ||
|
||
#mouseon-examples div { | ||
background-color: #AAA; | ||
text-align: center; | ||
height: 75px; | ||
width: 400px; | ||
} | ||
#powerTip a { | ||
color: #00F; | ||
} | ||
</style> | ||
<link rel="stylesheet" type="text/css" href="jquery.powertip.css" /> | ||
</head> | ||
<body> | ||
<div id="header"> | ||
<h1>jQuery PowerTip</h1> | ||
<p>jQuery plugin that creates hover tooltips.</p> | ||
</div> | ||
<div id="placement-examples"> | ||
<h2>Placement examples</h2> | ||
<div> | ||
<input type="button" id="north" value="North" title="North placement {placement: 'n'}" /><br /> | ||
<input type="button" id="west" value="West" title="West placement {placement: 'w'}" /> | ||
<input type="button" id="east" value="East" title="East placement {placement: 'e'}" /><br /> | ||
<input type="button" id="south" value="South" title="South placement {placement: 's'}" /><br /> | ||
</div> | ||
</div> | ||
<div id="mousefollow-examples"> | ||
<h2>Mouse follow examples</h2> | ||
<div title="Mouse follow {followMouse: true}"> | ||
The PowerTip for this box will follow the mouse. | ||
</div> | ||
</div> | ||
<div id="mouseon-examples"> | ||
<h2>Mouse on to popup examples</h2> | ||
<div> | ||
The PowerTip for this box will appear on the right and you will be able to interact with its content. | ||
</div> | ||
</div> | ||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> | ||
<script type="text/javascript" src="jquery.powertip.js"></script> | ||
<script type="text/javascript"> | ||
$(function() { | ||
// placement examples | ||
$('#north').powerTip({placement: 'n'}); | ||
$('#east').powerTip({placement: 'e'}); | ||
$('#south').powerTip({placement: 's'}); | ||
$('#west').powerTip({placement: 'w'}); | ||
|
||
// mouse follow examples | ||
$('#mousefollow-examples div').powerTip({followMouse: true}); | ||
|
||
// mouse-on examples | ||
$('#mouseon-examples div').data('powertipjq', $([ | ||
'<p><b>Here is some content</b></p>', | ||
'<p><a href="http://stevenbenner.com/">Maybe a link</a></p>', | ||
'<p><code>{ placement: \'e\', mouseOnToPopup: true }</code></p>' | ||
].join('\n'))); | ||
$('#mouseon-examples div').powerTip({ | ||
placement: 'e', | ||
mouseOnToPopup: true | ||
}); | ||
}); | ||
</script> | ||
<div id="footer"> | ||
<p id="copyright"> | ||
Copyright © 2012 <a href="http://stevenbenner.com/">Steven Benner</a>. | ||
</p> | ||
<p id="license"> | ||
Released under the <a href="https://raw.github.com/stevenbenner/jquery-powertip/master/LICENSE.txt">MIT license</a>. | ||
</p> | ||
</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
/* PowerTip Plugin */ | ||
#powerTip { | ||
cursor: default; | ||
background-color: #000; | ||
border: 1px solid #999; | ||
border-radius: 6px; | ||
box-shadow: 0 0 3px rgba(255, 255, 255, 0.5) inset; | ||
color: #FFF; | ||
display: none; | ||
opacity: 0.9; | ||
padding: 10px; | ||
position: absolute; | ||
z-index: 2; | ||
} |
Oops, something went wrong.