├── index.styl ├── lib ├── tooltips.js └── tooltips.styl ├── package.json ├── .gitignore ├── README.md ├── test └── index.html └── dist └── tooltips.min.css /index.styl: -------------------------------------------------------------------------------- 1 | @import "lib/tooltips" -------------------------------------------------------------------------------- /lib/tooltips.js: -------------------------------------------------------------------------------- 1 | var plugin = module.exports = function plugin () { 2 | 'use strict'; 3 | 4 | console.log(__dirname) 5 | return function (style) { 6 | style.include(__dirname); 7 | }; 8 | }; 9 | 10 | plugin.path = __dirname; 11 | plugin.version = require(__dirname + '/../package.json').version; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tooltips", 3 | "version": "1.1.1", 4 | "description": "纯css工具提示 tooltips", 5 | "main": "lib/tooltips.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "stylus -u autoprefixer-stylus lib/tooltips.styl -o dist/tooltips.min.css -c", 9 | "watch": "stylus -u autoprefixer-stylus -w lib/tooltips.styl -o dist/tooltips.min.css -c " 10 | }, 11 | "author": "", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/xurui3762791/tooltips" 15 | }, 16 | "devDependencies": {}, 17 | "dependencies": { 18 | "autoprefixer-stylus": "^0.9.2", 19 | "stylus": "^0.54.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Read about how to use .gitignore: http://h5bp.com/ae 2 | 3 | # Numerous always-ignore extensions 4 | *.diff 5 | *.err 6 | *.orig 7 | *.log 8 | *.rej 9 | *.swo 10 | *.swp 11 | *.vi 12 | *~ 13 | *.sass-cache 14 | 15 | 16 | bulid 17 | 18 | # OS or Editor folders 19 | .DS_Store 20 | ._* 21 | Thumbs.db 22 | .cache 23 | .project 24 | .settings 25 | .tmproj 26 | nbproject 27 | *.sublime-project 28 | *.sublime-workspace 29 | 30 | # Dreamweaver added files 31 | _notes 32 | dwsync.xml 33 | 34 | # Komodo 35 | *.komodoproject 36 | .komodotools 37 | 38 | # Espresso 39 | *.esproj 40 | *.espressostorage 41 | 42 | # Rubinius 43 | *.rbc 44 | 45 | # Folders to ignore 46 | .hg 47 | .svn 48 | .CVS 49 | .idea 50 | 51 | # Project folders to ignore 52 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tooltips 2 | 3 | [![](https://jaywcjlove.github.io/sb/ico/stylus.svg)](http://stylus-lang.com/) ![](http://jaywcjlove.github.io/sb/license/mit.svg) [![GitHub issues](https://img.shields.io/github/issues/xurui3762791/tooltips.svg)](https://github.com/xurui3762791/tooltips/issues) [![GitHub forks](https://img.shields.io/github/forks/xurui3762791/tooltips.svg)](https://github.com/xurui3762791/tooltips/network) [![GitHub stars](https://img.shields.io/github/stars/xurui3762791/tooltips.svg)](https://github.com/xurui3762791/tooltips/stargazers) 4 | 5 | 纯css工具提示 bubbles-tooltips [查看效果](http://xurui3762791.github.io/tooltips/) 6 | 7 | 8 | # 演示 9 | ![tooltips](https://raw.githubusercontent.com/xurui3762791/tooltips/gh-pages/img/demo2.gif) 10 | ![tooltips](https://raw.githubusercontent.com/xurui3762791/tooltips/gh-pages/img/demo3.gif) 11 | 12 | 13 | # 安装 14 | 15 | ```bash 16 | 17 | npm install tooltips --save 18 | 19 | ``` 20 | 21 | # 使用 22 | 23 | ## 在 gulp 中使用 24 | 25 | 26 | ### gulp 27 | ```css 28 | var gulp = require('gulp'); 29 | var gutil = require('gulp-util'); 30 | var stylus = require('gulp-stylus'); 31 | var tooltips = require('tooltips'); 32 | var autoprefixer = require('gulp-autoprefixer'); 33 | var browserslist = ['Android 2.3', 'Android >= 4', 'Chrome >= 20', 'Firefox >= 24', 'Explorer >= 8', 'iOS >= 6', 'Opera >= 12', 'Safari >= 6']; 34 | gulp.src('./public/styl/*.styl') 35 | .pipe(stylus({ 36 | use:[tooltips()], 37 | compress:true 38 | })) 39 | .pipe(autoprefixer({ 40 | browsers: browserslist, 41 | cascade: false 42 | }).on('error',gutil.log)) 43 | .pipe(gulp.dest('./public/css')); 44 | 45 | ``` 46 | 47 | ### index.styl 48 | ```css 49 | @import 'tooltips' 50 | .banner{ 51 | height 140px 52 | font-size 24px 53 | } 54 | 55 | ``` 56 | 57 | 58 | 59 | ## 常规使用方法 60 | 61 | 直接在页面中引用`tooltips.min.css` 62 | 63 | ```html 64 | 65 | tooltips 66 | ``` 67 | 68 | ## 在页面中使用 69 | 70 | ```html 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | ``` 88 | 89 | ## 新增背景颜色提示 90 | 91 | ```html 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | ``` 100 | 101 | # 开发 102 | 103 | ```bash 104 | $ npm run build 105 | $ npm run watch 106 | ``` 107 | 108 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 纯css工具提示 tooltips 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 31 | 32 | 33 |
34 |
35 | 36 | 37 | 38 |

tooltips.css

39 |

纯css打造的工具提示

40 | Github Project 41 | 42 | 43 | 44 | 45 |
46 |
47 |
48 | 49 | 50 |

Example

51 |
52 | bottom-right 53 |
54 |
55 | bottom 56 |
57 |
58 | bottom-left 59 |
60 |
61 | right 62 |
63 |
.
64 |
65 | left 66 |
67 |
68 | top-right 69 |
70 |
71 | top 72 |
73 |
74 | top-left 75 |
76 |
77 | 78 | 79 |

Color tools

80 | 81 |
82 | error 83 |
84 |
85 | warning 86 |
87 |
88 | info 89 |
90 |
91 | success 92 |
93 | 94 | 95 |
96 |

Size tools

97 |
98 | Small 99 |
100 |
101 | Medium 102 |
103 |
104 | Large 105 |
106 | 107 | 108 |
109 |

Alternative

110 | 111 |
112 | 还可以这样提示 113 |
114 | 115 |
116 | 117 | 118 | 119 | 120 | 121 |
122 | 123 |
124 |

Using

125 |

在HTML上添加tooltips.min.css

126 |
127 | 
<link rel="stylesheet" href="tooltips.min.css">
128 | 129 |
130 |

在 stylus 中使用

131 |
132 | 
@import "node_modules/tooltips"
133 | 134 |
135 |

给标签添加 data-tooltips 和 class="tooltips-top" 属性

136 |
137 | 
<span data-tooltips="top" class="tooltips-top"" >tooltips</span>
138 |
139 |
140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /lib/tooltips.styl: -------------------------------------------------------------------------------- 1 | 2 | // Variables 3 | 4 | 5 | $tooltipsPrefix = 'tooltips-' ; 6 | $tooltipsFontSize = 12px ; 7 | $tooltipsFontFamily = 'Helvetica Neue', Helvetica, Arial, sans-serif ; 8 | $tooltipsVerticalPadding = 8px ; 9 | $tooltipsHorizontalPadding = 10px ; 10 | 11 | $tooltipsTooltipHeight = $tooltipsFontSize + 2 * $tooltipsVerticalPadding ; 12 | $tooltipsArrowBorderWidth = 6px ; 13 | $tooltipsArrowOffsetX = 2 * $tooltipsArrowBorderWidth ; 14 | 15 | $tooltipsTextShadowDarkenAmount = 25% ; 16 | $tooltipsTransitionDistance = 8px ; 17 | $tooltipsShowDelay = 100ms ; 18 | $tooltipsHideDelay = 0ms 19 | $tooltipsZIndex = 1000000 ; 20 | 21 | 22 | // color 23 | $tooltipsDefaultColor = hsl(0, 0%, 22%) ; 24 | $tooltipsErrorColor = hsl(1, 40%, 50%) ; 25 | $tooltipsWarningColor = hsl(38, 46%, 54%) ; 26 | $tooltipsInfoColor = hsl(200, 50%, 45%) ; 27 | $tooltipsSuccessColor = hsl(121, 32%, 40%) ; 28 | 29 | 30 | // size 31 | $tooltipsSizeSmall = 80px ; 32 | $tooltipsSizeMedium = 150px ; 33 | $tooltipsSizeLarge = 300px ; 34 | 35 | 36 | 37 | // mixins 38 | 39 | 40 | 41 | vendor(property, value) 42 | {property} value 43 | -moz-{property} value 44 | -webkit-{property} value 45 | 46 | 47 | // top bottom left right 48 | arrow-border-color(color) 49 | for position in top bottom left right 50 | if position == top or position == bottom 51 | for xDir in left right 52 | &.{$tooltipsPrefix}{position}-{xDir}:before 53 | border-{position}-color: color; 54 | 55 | &.{$tooltipsPrefix}{position}:before 56 | border-{position}-color: color; 57 | 58 | set-margin(property, transitionDirection, $translateX=0) 59 | $value = unquote((property) + '('+ $tooltipsTransitionDistance * transitionDirection +')') 60 | &:before 61 | vendor('transform', $value); 62 | &:after 63 | if $translateX != 0 64 | vendor('transform', translateX($translateX) $value); 65 | 66 | else 67 | vendor('transform', $value); 68 | 69 | vertical-positioned-tooltip(propertyY, transitionDirection, $xDirection=0) 70 | &:before 71 | margin-{propertyY}: -2 * $tooltipsArrowBorderWidth + 1; 72 | 73 | 74 | &:before, &:after 75 | {propertyY}: 100%; 76 | left: 50%; 77 | 78 | 79 | &:before 80 | left unquote(calc(50% - 6px)) 81 | $translateX = -50%; 82 | if $xDirection == -1 83 | $translateX = -100%; 84 | 85 | else if $xDirection == 1 86 | $translateX = 0; 87 | 88 | &:after 89 | vendor('transform', translateX($translateX)); 90 | 91 | 92 | &:after 93 | if $xDirection != 0 94 | margin-left: - ($xDirection * $tooltipsArrowOffsetX); 95 | 96 | &:hover, &:focus 97 | set-margin('translateY', transitionDirection, $translateX); 98 | 99 | 100 | horizontal-positioned-tooltip(propertyX, transitionDirection) 101 | &:before 102 | margin-{propertyX}: -2 * $tooltipsArrowBorderWidth + 1; 103 | margin-bottom: -1 * $tooltipsArrowBorderWidth; 104 | 105 | &:after 106 | margin-bottom: -1 * floor($tooltipsTooltipHeight / 2); 107 | 108 | &:before, &:after 109 | {propertyX}: 100%; 110 | bottom: 50%; 111 | 112 | &:hover, &:focus 113 | set-margin('translateX', transitionDirection); 114 | 115 | 116 | // color 117 | 118 | tooltips-type($color) 119 | &:after 120 | background-color: $color; 121 | text-shadow: 0 -1px 0px darken($color, $tooltipsTextShadowDarkenAmount); 122 | arrow-border-color($color); 123 | 124 | 125 | 126 | 127 | // style 128 | 129 | 130 | [data-tooltips] 131 | position: relative; 132 | display: inline-block; 133 | 134 | &:before, 135 | &:after 136 | border-radius 4px; 137 | position absolute 138 | vendor('transform', translate3d(0, 0, 0)) 139 | 140 | visibility hidden 141 | opacity 0 142 | z-index $tooltipsZIndex 143 | pointer-events: none 144 | 145 | vendor('transition', 0.3s ease) 146 | vendor('transition-delay', $tooltipsHideDelay) 147 | 148 | &:hover:before, 149 | &:hover:after 150 | visibility visible 151 | opacity 1 152 | 153 | &:hover:before, 154 | &:hover:after 155 | vendor('transition-delay', $tooltipsShowDelay); 156 | &:before 157 | content: ''; 158 | position: absolute; 159 | background: transparent; 160 | border: $tooltipsArrowBorderWidth solid transparent; 161 | z-index: $tooltipsZIndex + 1; 162 | &:after 163 | content: attr(data-tooltips); 164 | background: $tooltipsDefaultColor; 165 | color: white; 166 | padding: $tooltipsVerticalPadding $tooltipsHorizontalPadding; 167 | font-size: $tooltipsFontSize; 168 | font-family: $tooltipsFontFamily; 169 | line-height: $tooltipsFontSize; 170 | white-space: nowrap; 171 | 172 | [data-tooltips=''] 173 | &:before, 174 | &:after 175 | display: none !important; 176 | 177 | [data-tooltips] 178 | &:after 179 | text-shadow: 0 -1px 0px darken($tooltipsDefaultColor, $tooltipsTextShadowDarkenAmount); 180 | box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); 181 | 182 | arrow-border-color($tooltipsDefaultColor); 183 | 184 | 185 | .{$tooltipsPrefix}top 186 | vertical-positioned-tooltip('bottom', -1); 187 | 188 | 189 | .{$tooltipsPrefix}bottom 190 | vertical-positioned-tooltip('top', 1); 191 | 192 | 193 | .{$tooltipsPrefix}right 194 | horizontal-positioned-tooltip('left', 1); 195 | 196 | .{$tooltipsPrefix}left 197 | horizontal-positioned-tooltip('right', -1); 198 | 199 | .{$tooltipsPrefix}top-left 200 | vertical-positioned-tooltip('bottom', -1, -1); 201 | 202 | .{$tooltipsPrefix}top-right 203 | vertical-positioned-tooltip('bottom', -1, 1); 204 | 205 | .{$tooltipsPrefix}bottom-left 206 | vertical-positioned-tooltip('top', 1, -1); 207 | 208 | .{$tooltipsPrefix}bottom-right 209 | vertical-positioned-tooltip('top', 1, 1); 210 | 211 | 212 | // size 213 | 214 | .{$tooltipsPrefix}small, 215 | .{$tooltipsPrefix}medium, 216 | .{$tooltipsPrefix}large 217 | &:after 218 | white-space: normal; 219 | line-height: 1.4em; 220 | 221 | 222 | .{$tooltipsPrefix}small 223 | &:after 224 | width: $tooltipsSizeSmall; 225 | 226 | .{$tooltipsPrefix}medium 227 | &:after 228 | width: $tooltipsSizeMedium; 229 | 230 | .{$tooltipsPrefix}large 231 | &:after 232 | width: $tooltipsSizeLarge; 233 | 234 | .{$tooltipsPrefix}always 235 | &:after, 236 | &:before 237 | opacity: 1; 238 | visibility: visible; 239 | 240 | &.{$tooltipsPrefix}top 241 | set-margin('translateY', -1, -50%); 242 | &-left 243 | set-margin('translateY', -1, -100%); 244 | &-right 245 | set-margin('translateY', -1, 0); 246 | 247 | &.{$tooltipsPrefix}bottom 248 | set-margin('translateY', 1, -50%); 249 | &-left 250 | set-margin('translateY', 1, -100%); 251 | 252 | &-right 253 | set-margin('translateY', 1, 0); 254 | 255 | &.{$tooltipsPrefix}left 256 | set-margin('translateX', -1); 257 | &.{$tooltipsPrefix}right 258 | set-margin('translateX', 1); 259 | 260 | 261 | // color 262 | 263 | .{$tooltipsPrefix}error 264 | tooltips-type($tooltipsErrorColor); 265 | 266 | .{$tooltipsPrefix}warning 267 | tooltips-type($tooltipsWarningColor) 268 | 269 | .{$tooltipsPrefix}info 270 | tooltips-type($tooltipsInfoColor) 271 | 272 | .{$tooltipsPrefix}success 273 | tooltips-type($tooltipsSuccessColor) 274 | 275 | 276 | 277 | -------------------------------------------------------------------------------- /dist/tooltips.min.css: -------------------------------------------------------------------------------- 1 | [data-tooltips]{position:relative;display:inline-block;}[data-tooltips]:before,[data-tooltips]:after{border-radius:4px;position:absolute;transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);visibility:hidden;opacity:0;z-index:1000000;pointer-events:none;transition:.3s ease;-moz-transition:.3s ease;-webkit-transition:.3s ease;transition-delay:0ms;-moz-transition-delay:0ms;-webkit-transition-delay:0ms}[data-tooltips]:hover:before,[data-tooltips]:hover:after{visibility:visible;opacity:1}[data-tooltips]:hover:before,[data-tooltips]:hover:after{transition-delay:100ms;-moz-transition-delay:100ms;-webkit-transition-delay:100ms}[data-tooltips]:before{content:'';position:absolute;background:transparent;border:6px solid transparent;z-index:1000001}[data-tooltips]:after{content:attr(data-tooltips);background:#383838;color:#fff;padding:8px 10px;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;line-height:12px;white-space:nowrap}[data-tooltips='']:before,[data-tooltips='']:after{display:none !important}[data-tooltips]:after{text-shadow:0 -1px 0 #2a2a2a;box-shadow:4px 4px 8px rgba(0,0,0,0.3)}.tooltips-top-left:before{border-top-color:#383838}.tooltips-top-right:before{border-top-color:#383838}.tooltips-top:before{border-top-color:#383838}.tooltips-bottom-left:before{border-bottom-color:#383838}.tooltips-bottom-right:before{border-bottom-color:#383838}.tooltips-bottom:before{border-bottom-color:#383838}.tooltips-left:before{border-left-color:#383838}.tooltips-right:before{border-right-color:#383838}.tooltips-top:before{margin-bottom:-11px}.tooltips-top:before,.tooltips-top:after{bottom:100%;left:50%}.tooltips-top:before{left:calc(50% - 6px)}.tooltips-top:after{transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%)}.tooltips-top:hover:before,.tooltips-top:focus:before{transform:translateY(-8px);-moz-transform:translateY(-8px);-webkit-transform:translateY(-8px)}.tooltips-top:hover:after,.tooltips-top:focus:after{transform:translateX(-50%) translateY(-8px);-moz-transform:translateX(-50%) translateY(-8px);-webkit-transform:translateX(-50%) translateY(-8px)}.tooltips-bottom:before{margin-top:-11px}.tooltips-bottom:before,.tooltips-bottom:after{top:100%;left:50%}.tooltips-bottom:before{left:calc(50% - 6px)}.tooltips-bottom:after{transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%)}.tooltips-bottom:hover:before,.tooltips-bottom:focus:before{transform:translateY(8px);-moz-transform:translateY(8px);-webkit-transform:translateY(8px)}.tooltips-bottom:hover:after,.tooltips-bottom:focus:after{transform:translateX(-50%) translateY(8px);-moz-transform:translateX(-50%) translateY(8px);-webkit-transform:translateX(-50%) translateY(8px)}.tooltips-right:before{margin-left:-11px;margin-bottom:-6px}.tooltips-right:after{margin-bottom:-14px}.tooltips-right:before,.tooltips-right:after{left:100%;bottom:50%}.tooltips-right:hover:before,.tooltips-right:focus:before{transform:translateX(8px);-moz-transform:translateX(8px);-webkit-transform:translateX(8px)}.tooltips-right:hover:after,.tooltips-right:focus:after{transform:translateX(8px);-moz-transform:translateX(8px);-webkit-transform:translateX(8px)}.tooltips-left:before{margin-right:-11px;margin-bottom:-6px}.tooltips-left:after{margin-bottom:-14px}.tooltips-left:before,.tooltips-left:after{right:100%;bottom:50%}.tooltips-left:hover:before,.tooltips-left:focus:before{transform:translateX(-8px);-moz-transform:translateX(-8px);-webkit-transform:translateX(-8px)}.tooltips-left:hover:after,.tooltips-left:focus:after{transform:translateX(-8px);-moz-transform:translateX(-8px);-webkit-transform:translateX(-8px)}.tooltips-top-left:before{margin-bottom:-11px}.tooltips-top-left:before,.tooltips-top-left:after{bottom:100%;left:50%}.tooltips-top-left:before{left:calc(50% - 6px)}.tooltips-top-left:after{transform:translateX(-100%);-moz-transform:translateX(-100%);-webkit-transform:translateX(-100%)}.tooltips-top-left:after{margin-left:12px}.tooltips-top-left:hover:before,.tooltips-top-left:focus:before{transform:translateY(-8px);-moz-transform:translateY(-8px);-webkit-transform:translateY(-8px)}.tooltips-top-left:hover:after,.tooltips-top-left:focus:after{transform:translateX(-100%) translateY(-8px);-moz-transform:translateX(-100%) translateY(-8px);-webkit-transform:translateX(-100%) translateY(-8px)}.tooltips-top-right:before{margin-bottom:-11px}.tooltips-top-right:before,.tooltips-top-right:after{bottom:100%;left:50%}.tooltips-top-right:before{left:calc(50% - 6px)}.tooltips-top-right:after{transform:translateX(0);-moz-transform:translateX(0);-webkit-transform:translateX(0)}.tooltips-top-right:after{margin-left:-12px}.tooltips-top-right:hover:before,.tooltips-top-right:focus:before{transform:translateY(-8px);-moz-transform:translateY(-8px);-webkit-transform:translateY(-8px)}.tooltips-top-right:hover:after,.tooltips-top-right:focus:after{transform:translateY(-8px);-moz-transform:translateY(-8px);-webkit-transform:translateY(-8px)}.tooltips-bottom-left:before{margin-top:-11px}.tooltips-bottom-left:before,.tooltips-bottom-left:after{top:100%;left:50%}.tooltips-bottom-left:before{left:calc(50% - 6px)}.tooltips-bottom-left:after{transform:translateX(-100%);-moz-transform:translateX(-100%);-webkit-transform:translateX(-100%)}.tooltips-bottom-left:after{margin-left:12px}.tooltips-bottom-left:hover:before,.tooltips-bottom-left:focus:before{transform:translateY(8px);-moz-transform:translateY(8px);-webkit-transform:translateY(8px)}.tooltips-bottom-left:hover:after,.tooltips-bottom-left:focus:after{transform:translateX(-100%) translateY(8px);-moz-transform:translateX(-100%) translateY(8px);-webkit-transform:translateX(-100%) translateY(8px)}.tooltips-bottom-right:before{margin-top:-11px}.tooltips-bottom-right:before,.tooltips-bottom-right:after{top:100%;left:50%}.tooltips-bottom-right:before{left:calc(50% - 6px)}.tooltips-bottom-right:after{transform:translateX(0);-moz-transform:translateX(0);-webkit-transform:translateX(0)}.tooltips-bottom-right:after{margin-left:-12px}.tooltips-bottom-right:hover:before,.tooltips-bottom-right:focus:before{transform:translateY(8px);-moz-transform:translateY(8px);-webkit-transform:translateY(8px)}.tooltips-bottom-right:hover:after,.tooltips-bottom-right:focus:after{transform:translateY(8px);-moz-transform:translateY(8px);-webkit-transform:translateY(8px)}.tooltips-small:after,.tooltips-medium:after,.tooltips-large:after{white-space:normal;line-height:1.4em}.tooltips-small:after{width:80px}.tooltips-medium:after{width:150px}.tooltips-large:after{width:300px}.tooltips-always:after,.tooltips-always:before{opacity:1;visibility:visible}.tooltips-always.tooltips-top:before{transform:translateY(-8px);-moz-transform:translateY(-8px);-webkit-transform:translateY(-8px)}.tooltips-always.tooltips-top:after{transform:translateX(-50%) translateY(-8px);-moz-transform:translateX(-50%) translateY(-8px);-webkit-transform:translateX(-50%) translateY(-8px)}.tooltips-always.tooltips-top-left:before{transform:translateY(-8px);-moz-transform:translateY(-8px);-webkit-transform:translateY(-8px)}.tooltips-always.tooltips-top-left:after{transform:translateX(-100%) translateY(-8px);-moz-transform:translateX(-100%) translateY(-8px);-webkit-transform:translateX(-100%) translateY(-8px)}.tooltips-always.tooltips-top-right:before{transform:translateY(-8px);-moz-transform:translateY(-8px);-webkit-transform:translateY(-8px)}.tooltips-always.tooltips-top-right:after{transform:translateY(-8px);-moz-transform:translateY(-8px);-webkit-transform:translateY(-8px)}.tooltips-always.tooltips-bottom:before{transform:translateY(8px);-moz-transform:translateY(8px);-webkit-transform:translateY(8px)}.tooltips-always.tooltips-bottom:after{transform:translateX(-50%) translateY(8px);-moz-transform:translateX(-50%) translateY(8px);-webkit-transform:translateX(-50%) translateY(8px)}.tooltips-always.tooltips-bottom-left:before{transform:translateY(8px);-moz-transform:translateY(8px);-webkit-transform:translateY(8px)}.tooltips-always.tooltips-bottom-left:after{transform:translateX(-100%) translateY(8px);-moz-transform:translateX(-100%) translateY(8px);-webkit-transform:translateX(-100%) translateY(8px)}.tooltips-always.tooltips-bottom-right:before{transform:translateY(8px);-moz-transform:translateY(8px);-webkit-transform:translateY(8px)}.tooltips-always.tooltips-bottom-right:after{transform:translateY(8px);-moz-transform:translateY(8px);-webkit-transform:translateY(8px)}.tooltips-always.tooltips-left:before{transform:translateX(-8px);-moz-transform:translateX(-8px);-webkit-transform:translateX(-8px)}.tooltips-always.tooltips-left:after{transform:translateX(-8px);-moz-transform:translateX(-8px);-webkit-transform:translateX(-8px)}.tooltips-always.tooltips-right:before{transform:translateX(8px);-moz-transform:translateX(8px);-webkit-transform:translateX(8px)}.tooltips-always.tooltips-right:after{transform:translateX(8px);-moz-transform:translateX(8px);-webkit-transform:translateX(8px)}.tooltips-error:after{background-color:#b34e4d;text-shadow:0 -1px 0 #863b39}.tooltips-error.tooltips-top-left:before{border-top-color:#b34e4d}.tooltips-error.tooltips-top-right:before{border-top-color:#b34e4d}.tooltips-error.tooltips-top:before{border-top-color:#b34e4d}.tooltips-error.tooltips-bottom-left:before{border-bottom-color:#b34e4d}.tooltips-error.tooltips-bottom-right:before{border-bottom-color:#b34e4d}.tooltips-error.tooltips-bottom:before{border-bottom-color:#b34e4d}.tooltips-error.tooltips-left:before{border-left-color:#b34e4d}.tooltips-error.tooltips-right:before{border-right-color:#b34e4d}.tooltips-warning:after{background-color:#c09854;text-shadow:0 -1px 0 #977438}.tooltips-warning.tooltips-top-left:before{border-top-color:#c09854}.tooltips-warning.tooltips-top-right:before{border-top-color:#c09854}.tooltips-warning.tooltips-top:before{border-top-color:#c09854}.tooltips-warning.tooltips-bottom-left:before{border-bottom-color:#c09854}.tooltips-warning.tooltips-bottom-right:before{border-bottom-color:#c09854}.tooltips-warning.tooltips-bottom:before{border-bottom-color:#c09854}.tooltips-warning.tooltips-left:before{border-left-color:#c09854}.tooltips-warning.tooltips-right:before{border-right-color:#c09854}.tooltips-info:after{background-color:#3986ac;text-shadow:0 -1px 0 #2b6481}.tooltips-info.tooltips-top-left:before{border-top-color:#3986ac}.tooltips-info.tooltips-top-right:before{border-top-color:#3986ac}.tooltips-info.tooltips-top:before{border-top-color:#3986ac}.tooltips-info.tooltips-bottom-left:before{border-bottom-color:#3986ac}.tooltips-info.tooltips-bottom-right:before{border-bottom-color:#3986ac}.tooltips-info.tooltips-bottom:before{border-bottom-color:#3986ac}.tooltips-info.tooltips-left:before{border-left-color:#3986ac}.tooltips-info.tooltips-right:before{border-right-color:#3986ac}.tooltips-success:after{background-color:#458746;text-shadow:0 -1px 0 #346535}.tooltips-success.tooltips-top-left:before{border-top-color:#458746}.tooltips-success.tooltips-top-right:before{border-top-color:#458746}.tooltips-success.tooltips-top:before{border-top-color:#458746}.tooltips-success.tooltips-bottom-left:before{border-bottom-color:#458746}.tooltips-success.tooltips-bottom-right:before{border-bottom-color:#458746}.tooltips-success.tooltips-bottom:before{border-bottom-color:#458746}.tooltips-success.tooltips-left:before{border-left-color:#458746}.tooltips-success.tooltips-right:before{border-right-color:#458746} --------------------------------------------------------------------------------