From 831ea96df4099e2a31755ed4d7b69eb302c9e317 Mon Sep 17 00:00:00 2001 From: Bojan Petkovski Date: Sun, 13 Sep 2015 15:02:08 +0200 Subject: [PATCH] Added new options description --- README.md | 49 +++++++++++++++++++++++++++++-------------------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 3ca3a07..01a1b4c 100644 --- a/README.md +++ b/README.md @@ -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