Skip to content

Commit

Permalink
Added new options description
Browse files Browse the repository at this point in the history
  • Loading branch information
@object505
object505 committed Sep 13, 2015
1 parent 50430ab commit 831ea96
Showing 1 changed file with 29 additions and 20 deletions.
49 changes: 29 additions & 20 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,29 +40,38 @@ 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 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 |
| Name | Default | Description |
|---------------------|--------------|------------------------------------------------------------------------------------------------------------------------------------|
| speed | 400 | integer - Duration of the fade effect in ms |
| size | '' | Tipso Bubble size classes (string: 'tiny', 'small', 'default', 'large') or you can make your own classes |
| background | '#55b555' | Background color of the tooltip, it can be hex, rgb, rgba, color name |
| titleBackground | '#333333' | Background color of the tooltip title, it can be hex, rgb, rgba, color name |
| color | '#ffffff' | Text color of the tooltip, it can be hex, rgb, rgba, color name |
| titleColor | '#ffffff' | Text color of the tooltip title, it can be hex, rgb, rgba, color name |
| titleContent | '' | The content of the tooltip title, can be text, html or whatever you want |
| showArrow | true | Ability to show/hide the arrow of the tooltip (true, false) |
| 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 |
| contentElementId | null | Normally used for picking template scripts |
| useTitle | true | To use the default title attribute as content (true, false) |
| templateEngineFunc | null | A function that compiles and renders the content |
| 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` )
> You can set all the options via `data-tipso` attribute. For example if you want to change the background you will add `data-tipso-background="#555555"` to the element.
## API

```javascript
Expand Down

0 comments on commit 831ea96

Please sign in to comment.