Skip to content

Commit

Permalink
Update v1.0.5
Browse files Browse the repository at this point in the history
  • Loading branch information
@object505
object505 committed May 9, 2015
1 parent 6ec8fae commit 5987a5f
Show file tree
Hide file tree
Showing 7 changed files with 211 additions and 116 deletions.
38 changes: 20 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,24 +40,26 @@ To use css3 animation effects please include [Animate.css](http://daneden.github

##Usage

| Name | Default | Description |
|----------------|--------------|-----------------------------------------------------------------------------------------------------|
| speed | 400 | integer - Duration of the fade effect in ms |
| background | '#55b555' | Background color of the tooltip, it can be hex, rgb, rgba, color name |
| color | '#ffffff' | Text color of the tooltip, it can be hex, rgb, rgba, color name |
| position | 'top' | Initial position of the tooltip, available positions 'top', 'bottom', 'left', 'right' |
| width | 200 | Width of the tooltip in px |
| delay | 200 | Delay before showing the tooltip in ms |
| animationIn | '' | CSS3 animation effect to show the tooltip using [Animate.css](http://daneden.github.io/animate.css) |
| animationOut | '' | CSS3 animation effect to hide the tooltip using [Animate.css](http://daneden.github.io/animate.css) |
| offsetX | 0 | Offset value of the tooltip on X axis |
| offsetY | 0 | Offset value of the tooltip on Y axis |
| content | null | The content of the tooltip, can be text, html or whatever you want |
| ajaxContentUrl | null | Url for Ajax content |
| useTitle | true | To use the default title attribute as content (true,false) |
| onBeforeShow | function(){} | Function to be executed before tipso is shown |
| onShow | function(){} | Function to be executed after tipso is shown |
| onHide | function(){} | Function to be executed after tipso is hidden |
| Name | Default | Description |
|----------------|--------------|------------------------------------------------------------------------------------------------------------------------------------|
| speed | 400 | integer - Duration of the fade effect in ms |
| background | '#55b555' | Background color of the tooltip, it can be hex, rgb, rgba, color name |
| color | '#ffffff' | Text color of the tooltip, it can be hex, rgb, rgba, color name |
| position | 'top' | Initial position of the tooltip, available positions 'top', 'bottom', 'left', 'right' |
| width | 200 | Width of the tooltip in px or % (for % add the value in quotes ex.'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 |
| delay | 200 | Delay before showing the tooltip in ms |
| animationIn | '' | CSS3 animation effect to show the tooltip using [Animate.css](http://daneden.github.io/animate.css) |
| animationOut | '' | CSS3 animation effect to hide the tooltip using [Animate.css](http://daneden.github.io/animate.css) |
| offsetX | 0 | Offset value of the tooltip on X axis |
| offsetY | 0 | Offset value of the tooltip on Y axis |
| tooltipHover | false | Abillity to interact with the tooltip content |
| content | null | The content of the tooltip, can be text, html or whatever you want |
| ajaxContentUrl | null | Url for Ajax content |
| useTitle | true | To use the default title attribute as content (true,false) |
| onBeforeShow | function(){} | Function to be executed before tipso is shown |
| onShow | function(){} | Function to be executed after tipso is shown |
| onHide | function(){} | Function to be executed after tipso is hidden |

> Additionaly you can use `data-tipso` instead of the title attribute for the tooltip content ( set `useTitle: false` )
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "tipso",
"version": "1.0.4",
"version": "1.0.5",
"description": "A Lightweight Responsive jQuery Tooltip Plugin",
"main": ["src/tipso.min.js", "src/tipso.css"],
"keywords": [
Expand Down
35 changes: 34 additions & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<link rel="stylesheet" href="../src/tipso.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../src/tipso.js"></script>
<script src="../src/tipso.min.js"></script>

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
Expand Down Expand Up @@ -38,7 +38,21 @@
position: 'top',
background: '#F62459',
useTitle: false,
width: '',
maxWidth: 300
});
jQuery('.hover-tipso-tooltip').tipso({
position: 'top',
background: '#000',
useTitle: false,
width: false,
maxWidth: 300,
tooltipHover: true,
content: function(){
return 'You can <a href="javascript:;">CLICK ME</a> now!';
}
});

// Use Title For Tipso Content
jQuery('.title-tipso').tipso();
// Tipso for Image
Expand Down Expand Up @@ -197,11 +211,13 @@ <h3>Defaults</h3>
color : '#ffffff',
position : 'top',
width : 200,
maxWidth : '',
delay : 200,
animationIn : 'fadeIn',
animationOut : 'fadeOut',
offsetX : 0,
offsetY : 0,
tooltipHover : false,
content : null,
ajaxContentUrl : null,
useTitle : true,
Expand Down Expand Up @@ -481,6 +497,23 @@ <h4>Tipso CSS3 Animation</h4>
</div>
</div>

<div class="row demo-section">
<div class="c6">
<h4>Interact with tipso tooltip</h4>
<p>Some tooltip <span class="hover-tipso-tooltip" data-tipso="This is a manual TIPSO!">content</span> you can interact with</p>
</div>

<div class="c6">
<pre><span>Code Example</span>
<code>
jQuery('.hover-tipso-tooltip').tipso({
tooltipHover: true
});
</code>
</pre>
</div>
</div>

<div class="row demo-section">
<div class="c6">
<h4>Click to show/hide tipso</h4>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"mobile",
"lightweight"
],
"version": "1.0.4",
"version": "1.0.5",
"author": "Bojan Petkovski (http://object505.com/)",
"licenses": [
{
Expand Down
Loading

0 comments on commit 5987a5f

Please sign in to comment.