Skip to content

Commit 5987a5f

Browse files
object505object505
committed
Update v1.0.5
1 parent 6ec8fae commit 5987a5f

File tree

7 files changed

+211
-116
lines changed

7 files changed

+211
-116
lines changed

‎README.md

+20-18
Original file line numberDiff line numberDiff line change
@@ -40,24 +40,26 @@ To use css3 animation effects please include [Animate.css](http://daneden.github
4040

4141
##Usage
4242

43-
| Name | Default | Description |
44-
|----------------|--------------|-----------------------------------------------------------------------------------------------------|
45-
| speed | 400 | integer - Duration of the fade effect in ms |
46-
| background | '#55b555' | Background color of the tooltip, it can be hex, rgb, rgba, color name |
47-
| color | '#ffffff' | Text color of the tooltip, it can be hex, rgb, rgba, color name |
48-
| position | 'top' | Initial position of the tooltip, available positions 'top', 'bottom', 'left', 'right' |
49-
| width | 200 | Width of the tooltip in px |
50-
| delay | 200 | Delay before showing the tooltip in ms |
51-
| animationIn | '' | CSS3 animation effect to show the tooltip using [Animate.css](http://daneden.github.io/animate.css) |
52-
| animationOut | '' | CSS3 animation effect to hide the tooltip using [Animate.css](http://daneden.github.io/animate.css) |
53-
| offsetX | 0 | Offset value of the tooltip on X axis |
54-
| offsetY | 0 | Offset value of the tooltip on Y axis |
55-
| content | null | The content of the tooltip, can be text, html or whatever you want |
56-
| ajaxContentUrl | null | Url for Ajax content |
57-
| useTitle | true | To use the default title attribute as content (true,false) |
58-
| onBeforeShow | function(){} | Function to be executed before tipso is shown |
59-
| onShow | function(){} | Function to be executed after tipso is shown |
60-
| onHide | function(){} | Function to be executed after tipso is hidden |
43+
| Name | Default | Description |
44+
|----------------|--------------|------------------------------------------------------------------------------------------------------------------------------------|
45+
| speed | 400 | integer - Duration of the fade effect in ms |
46+
| background | '#55b555' | Background color of the tooltip, it can be hex, rgb, rgba, color name |
47+
| color | '#ffffff' | Text color of the tooltip, it can be hex, rgb, rgba, color name |
48+
| position | 'top' | Initial position of the tooltip, available positions 'top', 'bottom', 'left', 'right' |
49+
| width | 200 | Width of the tooltip in px or % (for % add the value in quotes ex.'50%') |
50+
| maxWidth | '' | max-width of the tooltip in px or % (for % add the value in quotes ex.'50%'). For usage you need to set width to '', false or null |
51+
| delay | 200 | Delay before showing the tooltip in ms |
52+
| animationIn | '' | CSS3 animation effect to show the tooltip using [Animate.css](http://daneden.github.io/animate.css) |
53+
| animationOut | '' | CSS3 animation effect to hide the tooltip using [Animate.css](http://daneden.github.io/animate.css) |
54+
| offsetX | 0 | Offset value of the tooltip on X axis |
55+
| offsetY | 0 | Offset value of the tooltip on Y axis |
56+
| tooltipHover | false | Abillity to interact with the tooltip content |
57+
| content | null | The content of the tooltip, can be text, html or whatever you want |
58+
| ajaxContentUrl | null | Url for Ajax content |
59+
| useTitle | true | To use the default title attribute as content (true,false) |
60+
| onBeforeShow | function(){} | Function to be executed before tipso is shown |
61+
| onShow | function(){} | Function to be executed after tipso is shown |
62+
| onHide | function(){} | Function to be executed after tipso is hidden |
6163

6264
> Additionaly you can use `data-tipso` instead of the title attribute for the tooltip content ( set `useTitle: false` )
6365

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "tipso",
3-
"version": "1.0.4",
3+
"version": "1.0.5",
44
"description": "A Lightweight Responsive jQuery Tooltip Plugin",
55
"main": ["src/tipso.min.js", "src/tipso.css"],
66
"keywords": [

‎demo/index.html

+34-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<link rel="stylesheet" href="../src/tipso.css">
1111
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
1212
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
13-
<script src="../src/tipso.js"></script>
13+
<script src="../src/tipso.min.js"></script>
1414

1515
<!--[if lt IE 9]>
1616
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -38,7 +38,21 @@
3838
position: 'top',
3939
background: '#F62459',
4040
useTitle: false,
41+
width: '',
42+
maxWidth: 300
4143
});
44+
jQuery('.hover-tipso-tooltip').tipso({
45+
position: 'top',
46+
background: '#000',
47+
useTitle: false,
48+
width: false,
49+
maxWidth: 300,
50+
tooltipHover: true,
51+
content: function(){
52+
return 'You can <a href="javascript:;">CLICK ME</a> now!';
53+
}
54+
});
55+
4256
// Use Title For Tipso Content
4357
jQuery('.title-tipso').tipso();
4458
// Tipso for Image
@@ -197,11 +211,13 @@ <h3>Defaults</h3>
197211
color : '#ffffff',
198212
position : 'top',
199213
width : 200,
214+
maxWidth : '',
200215
delay : 200,
201216
animationIn : 'fadeIn',
202217
animationOut : 'fadeOut',
203218
offsetX : 0,
204219
offsetY : 0,
220+
tooltipHover : false,
205221
content : null,
206222
ajaxContentUrl : null,
207223
useTitle : true,
@@ -481,6 +497,23 @@ <h4>Tipso CSS3 Animation</h4>
481497
</div>
482498
</div>
483499

500+
<div class="row demo-section">
501+
<div class="c6">
502+
<h4>Interact with tipso tooltip</h4>
503+
<p>Some tooltip <span class="hover-tipso-tooltip" data-tipso="This is a manual TIPSO!">content</span> you can interact with</p>
504+
</div>
505+
506+
<div class="c6">
507+
<pre><span>Code Example</span>
508+
<code>
509+
jQuery('.hover-tipso-tooltip').tipso({
510+
tooltipHover: true
511+
});
512+
</code>
513+
</pre>
514+
</div>
515+
</div>
516+
484517
<div class="row demo-section">
485518
<div class="c6">
486519
<h4>Click to show/hide tipso</h4>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"mobile",
1111
"lightweight"
1212
],
13-
"version": "1.0.4",
13+
"version": "1.0.5",
1414
"author": "Bojan Petkovski (http://object505.com/)",
1515
"licenses": [
1616
{

0 commit comments

Comments
 (0)