Skip to content

Commit 831ea96

Browse files
object505object505
committed
Added new options description
1 parent 50430ab commit 831ea96

File tree

1 file changed

+29
-20
lines changed

1 file changed

+29
-20
lines changed

‎README.md

+29-20
Original file line numberDiff line numberDiff line change
@@ -40,29 +40,38 @@ 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 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 |
43+
| Name | Default | Description |
44+
|---------------------|--------------|------------------------------------------------------------------------------------------------------------------------------------|
45+
| speed | 400 | integer - Duration of the fade effect in ms |
46+
| size | '' | Tipso Bubble size classes (string: 'tiny', 'small', 'default', 'large') or you can make your own classes |
47+
| background | '#55b555' | Background color of the tooltip, it can be hex, rgb, rgba, color name |
48+
| titleBackground | '#333333' | Background color of the tooltip title, it can be hex, rgb, rgba, color name |
49+
| color | '#ffffff' | Text color of the tooltip, it can be hex, rgb, rgba, color name |
50+
| titleColor | '#ffffff' | Text color of the tooltip title, it can be hex, rgb, rgba, color name |
51+
| titleContent | '' | The content of the tooltip title, can be text, html or whatever you want |
52+
| showArrow | true | Ability to show/hide the arrow of the tooltip (true, false) |
53+
| position | 'top' | Initial position of the tooltip, available positions 'top', 'bottom', 'left', 'right' |
54+
| width | 200 | Width of the tooltip in px or % (for % add the value in quotes ex.'50%') |
55+
| 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 |
56+
| delay | 200 | Delay before showing the tooltip in ms |
57+
| animationIn | '' | CSS3 animation effect to show the tooltip using [Animate.css](http://daneden.github.io/animate.css) |
58+
| animationOut | '' | CSS3 animation effect to hide the tooltip using [Animate.css](http://daneden.github.io/animate.css) |
59+
| offsetX | 0 | Offset value of the tooltip on X axis |
60+
| offsetY | 0 | Offset value of the tooltip on Y axis |
61+
| tooltipHover | false | Abillity to interact with the tooltip content |
62+
| content | null | The content of the tooltip, can be text, html or whatever you want |
63+
| ajaxContentUrl | null | Url for Ajax content |
64+
| contentElementId | null | Normally used for picking template scripts |
65+
| useTitle | true | To use the default title attribute as content (true, false) |
66+
| templateEngineFunc | null | A function that compiles and renders the content |
67+
| onBeforeShow | function(){} | Function to be executed before tipso is shown |
68+
| onShow | function(){} | Function to be executed after tipso is shown |
69+
| onHide | function(){} | Function to be executed after tipso is hidden |
6370

6471
> Additionaly you can use `data-tipso` instead of the title attribute for the tooltip content ( set `useTitle: false` )
6572
73+
> 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.
74+
6675
## API
6776

6877
```javascript

0 commit comments

Comments
 (0)