Tips for the Assemble CSS Framework.
npm install assemble-tips[Assemble]: http://assemblecss.com
[Assemble Base]: https://github.com/lukelarsen/assemble-base
[postcss-map]: https://github.com/pascalduez/postcss-map
css
@import '../node_modules/assemble-base/base';/*
Override variables here before the Assemble Components are loaded.
*/
@import '../node_modules/assemble-tips/assemble-tips';
`$3
html
?
Tip Content Here
×
`Options
Options are set with variables. These variables are already set with their default values so they will just work out of the box. If you wish to change them just define the variable you want to change before you load the _assemble-tips.css file. You may wish you see [Assemble Base] for more examples and directions for setting up a Assemble project.$3
##### $tip-background-color
- Set the tip background color.
- Default: #002;
- Type: Color
css
$tip-background-color: #CCC;
`##### $tip-text-color
- Set the tip text color.
- Default: #FFF;
- Type: Color
css
$tip-text-color: #000;
`##### $tip-close-background-color
- Set the tip close background color.
- Default: #666;
- Type: Color
css
$tip-close-background-color: #999;
`##### $tip-close-background-hover-color
- Set the tip close background hover color.
- Default: #444;
- Type: Color
css
$tip-close-background-hover-color: #555;
`##### $tip-close-text-color
- Set the tip close text color.
- Default: #FFF;
- Type: Color
css
$tip-close-text-color: #CCC;
`##### $tip-close-text-hover-color:
- Set the tip close text hover color.
- Default: #FFF;
- Type: Color
css
$tip-close-text-hover-color: #CCC;
`##### $tip-padding
- Set the tip padding.
- Default: 5px 10px;
- Type: String
css
$tip-padding: 15px;
`##### $tip-close-padding
- Set the tip close padding.
- Default: 5px 9px 8px;
- Type: String
css
$tip-close-padding: 3px;
`##### $tip-font-size
- Set the tip font size.
- Default: 12px;
- Type: Number
css
$tip-font-size: 14px;
`##### $tip-line-height
- Set the tip line height.
- Default: 15px;
- Type: Number
css
$tip-line-height: 18px;
`##### $tip-transition
- Set what transition on tips should be.
- Default: 0.3s ease;
- Type: String
css
$tip-transition: 0.5s bounce;
`##### Tip z-index
This component makes use of the [postcss-map] plugin to set the z-index. [postcss-map] is included with [Assemble Base] so you are good to go. This helps keep all our z-index values in one place. To get this working you will need to:
1- Create a 'constants.json' file and add this to it
js
{
"zIndexes": {
"tip": 11
}
}
`
2- Then in your main gulp file provide the path to the newly created constants.json in the assembeCore options.
js
assembleCore({
basePath: 'src/',
maps: [ 'constants.json' ]
})
`Now the assemble-tips component will pull the z-index values from the constants.js file. You can add more values there and call them in your css with
css
z-index: map(constants, zIndexes, something);
`
$3
##### $tip-container--right
- Turn on/off the ability to put the tip container at the right. If true a class of .tip-container--right will be generated. This class requires .tip-container.
- Default: false;
- Type: Boolean
css
$tip-container--right: true;
`
Usage
html
`##### $tip-enable-width
- Turn on/off the ability to allow tips to have fixed widths. If true a class of .tip--fixed-width will be generated. This class requires .tip. You will set the width with the $tip-width variable.
- Default: false;
- Type: Boolean
css
$tip-enable-width: true;
`##### $tip-width
- Set the width of tips. Needs $tip-enable-width to be true.
- Default: 210px;
- Type: Number
css
$tip-width: 250px;
`
Usage
html
`
$3
##### $tip-enable-top
- Turn on/off the ability to show the tip on top of the trigger point. If true a class of .tip--top will be generated. This class requires .tip.
- Default: false;
- Type: Boolean
css
$tip-enable-top: true;
`
Usage
html
`##### $tip-top-top-position
- Set how far from the top the top tips should be.
- Default: 20px;
- Type: Number
css
$tip-top-top-position: 10px;
`##### $tip-top-right-position
- Set how far from the rigft the top tips should be.
- Default: 26px;
- Type: Number
css
$tip-top-right-position: 20px;
`##### $tip-enable-bottom
- Turn on/off the ability to show the tip on bottom of the trigger point. If true a class of .tip--bottom will be generated. This class requires .tip.
- Default: false;
- Type: Boolean
css
$tip-enable-bottom: true;
`
Usage
html
`##### $tip-bottom-bottom-position
- Set how far from the bottom the top tips should be.
- Default: 20px;
- Type: Number
css
$tip-bottom-bottom-position: 10px;
`##### $tip-bottom-right-position
- Set how far from the rigft the bottom tips should be.
- Default: 26px;
- Type: Number
css
$tip-bottom-right-position: 20px;
`##### $tip-enable-right
- Turn on/off the ability to show the tip on right of the trigger point. If true a class of .tip--right will be generated. This class requires .tip.
- Default: false;
- Type: Boolean
css
$tip-enable-right: true;
`
Usage
html
`##### $tip-right-right-position
- Set how far from the right the right tips should be.
- Default: calc(-$tip-width - 8px);
- Type: Number
css
$tip-top-top-position: calc(-$tip-width - 10px);
`##### $tip-right-top-position
- Set how far from the top the right tips should be.
- Default: -7px;
- Type: Number
css
$tip-top-right-position: -10px;
`##### $tip-enable-left
- Turn on/off the ability to show the tip on left of the trigger point. If true a class of .tip--left will be generated. This class requires .tip.
- Default: false;
- Type: Boolean
css
$tip-enable-left: true;
`
Usage
html
`##### $tip-left-left-position
- Set how far from the left the left tips should be.
- Default: calc(-$tip-width - 33px);
- Type: Number
css
$tip-top-top-position: calc(-$tip-width - 38px);
`##### $tip-left-top-position
- Set how far from the top the left tips should be.
- Default: -7px;
- Type: Number
css
$tip-top-right-position: -10px;
``