├── .gitignore
├── README.md
├── dist
    └── tooltips.min.css
├── index.styl
├── lib
    ├── tooltips.js
    └── tooltips.styl
├── package.json
└── test
    └── index.html


/.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 | <link rel="stylesheet" href="tooltips.min.css">
 65 | <span data-tooltips="我是提示" data-tooltips-pos="up">tooltips</span>
 66 | ```
 67 | 
 68 | ## 在页面中使用
 69 | 
 70 | ```html
 71 | 
 72 | <button data-tooltips="top" class="tooltips-top">top</button>
 73 | <button data-tooltips="bottom" class="tooltips-bottom">bottom</button>
 74 | <button data-tooltips="left" class="tooltips-left">left</button>
 75 | <button data-tooltips="right" class="tooltips-right">right</button>
 76 | <button data-tooltips="bottom-left" class="tooltips-bottom-left">bottom-left</button>
 77 | <button data-tooltips="bottom-right" class="tooltips-bottom-right">bottom-right</button>
 78 | <button data-tooltips="top-right" class="tooltips-top-right">top-right</button>
 79 | <button data-tooltips="top-left" class="tooltips-top-left">top-left</button>
 80 | 
 81 | <button class="tooltips-top  tooltips-small"  data-tooltips="small工具提示">Small</button>  
 82 | <button class="tooltips-top  tooltips-medium"  data-tooltips="medium工具提示!!!!!!!">Medium</button>
 83 | <button class="tooltips-top  tooltips-large"  data-tooltips="large工具提示!!!!!!!">Large</button>   
 84 | <button class="tooltips-bottom  tooltips-always" data-tooltips="...还可以这样提示">还可以这样提示</button> 
 85 | 
 86 | 
 87 | ```
 88 | 
 89 | ## 新增背景颜色提示
 90 | 
 91 | ```html
 92 |  
 93 | <button data-tooltips="error tooltips" class="tooltips-top tooltips-error">error</button>
 94 | <button data-tooltips="warning tooltips" class="tooltips-top tooltips-warning">warning</button>
 95 | <button data-tooltips="info tooltips" class="tooltips-top tooltips-info">info</button>
 96 | <button data-tooltips="success tooltips" class="tooltips-top tooltips-success">top</button>
 97 | 
 98 | 
 99 | ```
100 | 
101 | # 开发 
102 | 
103 | ```bash
104 | $ npm run build
105 | $ npm run watch
106 | ```
107 | 
108 | 


--------------------------------------------------------------------------------
/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}


--------------------------------------------------------------------------------
/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;


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>纯css工具提示 tooltips</title>   
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  7 |     <meta name="description" content="纯css工具提示 tooltips"> 
  8 |     <meta name="apple-mobile-web-app-capable" content="yes" />
  9 |     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
 10 | 
 11 |         <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">    
 12 | 
 13 |         <meta name="apple-mobile-web-app-capable" content="yes"/>
 14 |           <meta http-equiv="Cache-Control" content="no-siteapp" />
 15 | 
 16 |     <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css
 17 | ">
 18 |     <link rel="stylesheet" type="text/css" href="../dist/tooltips.min.css">
 19 | 
 20 | 
 21 | </head>
 22 | <style type="text/css">
 23 | body{overflow-x:hidden;}
 24 |     @media screen and (max-width: 400px) {
 25 |         .tooltips-header h1 {
 26 |             font-size: 55px;
 27 |         }
 28 |    }
 29 |    .tooltips-header h1{text-shadow: 0 6px 1px rgba(0, 0, 0, 0.2);}
 30 | </style>
 31 | <body>
 32 | 
 33 | <div class="tooltips-header">
 34 |       <div class="container">
 35 |       <a href="https://github.com/xurui3762791/tooltips" target="_blank" class="github-corner">
 36 | <svg width="150" height="150" viewBox="0 0 250 250" style="fill:#62A8E6; color:#000;position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
 37 | </a>
 38 |             <h1>tooltips.css</h1>
 39 |             <p>纯css打造的工具提示</p>
 40 |  <a target="_blank" href="https://github.com/xurui3762791/tooltips" data-tooltips="Github Project" class="tooltips-top btn btn-lg btn-primary">Github Project</a>
 41 |  <a target="_blank" href="https://github.com/xurui3762791/tooltips" data-tooltips="Download CSS" class="tooltips-top btn btn-lg btn-link hidden-xs">Download CSS</a>
 42 | 
 43 | 
 44 | 
 45 |       </div>
 46 | </div>
 47 | <div class="container">
 48 | 
 49 | 
 50 |         <h4>Example</h4>
 51 |     <div class="tooltips_cell col-md-4 tooltips_color_1">
 52 |         <a href="javascript:void(0)" data-tooltips="bottom-right" class="tooltips-bottom-right">bottom-right</a>
 53 |     </div>
 54 |     <div class="tooltips_cell col-md-4 tooltips_color_2">
 55 |         <a href="javascript:void(0)" data-tooltips="bottom" class="tooltips-bottom">bottom</a>
 56 |     </div>
 57 |     <div class="tooltips_cell col-md-4 tooltips_color_3">
 58 |         <a href="javascript:void(0)" data-tooltips="bottom-left" class="tooltips-bottom-left">bottom-left</a>
 59 |     </div>
 60 |     <div class="tooltips_cell col-md-4 tooltips_color_4">
 61 |         <a href="javascript:void(0)" data-tooltips="right" class="tooltips-right">right</a>
 62 |     </div>
 63 |     <div class="tooltips_cell col-md-4 tooltips_color_5"><a>.</a></div>
 64 |     <div class="tooltips_cell col-md-4 tooltips_color_6">
 65 |         <a href="javascript:void(0)" data-tooltips="left" class="tooltips-left">left</a>
 66 |     </div>
 67 |     <div class="tooltips_cell col-md-4 tooltips_color_7">
 68 |         <a href="javascript:void(0)" data-tooltips="top-right" class="tooltips-top-right">top-right</a>
 69 |     </div>
 70 |     <div class="tooltips_cell col-md-4 tooltips_color_8">
 71 |         <a href="javascript:void(0)" data-tooltips="top" class="tooltips-top">top</a>
 72 |     </div>
 73 |     <div class="tooltips_cell col-md-4 tooltips_color_9">
 74 |         <a href="javascript:void(0)" data-tooltips="top-left" class="tooltips-top-left">top-left</a>
 75 |     </div>
 76 | <div class="clearfix"></div>
 77 | 
 78 | 
 79 |         <h4>Color tools</h4>
 80 | 
 81 |     <div class="tooltips_cell col-md-3 tooltips_color_13">
 82 |         <a class="tooltips-top tooltips-error"  data-tooltips="error tooltips">error</a>   
 83 |     </div>
 84 |     <div class="tooltips_cell col-md-3 tooltips_color_14">
 85 |         <a class="tooltips-top tooltips-warning"  data-tooltips="warning tooltips">warning</a>   
 86 |     </div>
 87 |     <div class="tooltips_cell col-md-3 tooltips_color_15">
 88 |         <a class="tooltips-top tooltips-info"  data-tooltips="info tooltips">info</a>   
 89 |     </div>
 90 |     <div class="tooltips_cell col-md-3 tooltips_color_16">
 91 |         <a class="tooltips-top tooltips-success"  data-tooltips="success tooltips">success</a>   
 92 |     </div>
 93 | 
 94 | 
 95 | <div class="clearfix"></div>
 96 |         <h4>Size tools</h4>
 97 |     <div class="tooltips_cell col-md-4 tooltips_color_10">
 98 |         <a class="tooltips-top  tooltips-small"  data-tooltips="small工具提示">Small</a>    
 99 |     </div>
100 |     <div class="tooltips_cell col-md-4 tooltips_color_11">
101 |         <a class="tooltips-top  tooltips-medium"  data-tooltips="medium工具提示!!!!!!!">Medium</a>    
102 |     </div>
103 |     <div class="tooltips_cell col-md-4 tooltips_color_12">
104 |         <a class="tooltips-top  tooltips-large"  data-tooltips="large工具提示!!!!!!!">Large</a>    
105 |     </div>
106 | 
107 | 
108 | <div class="clearfix"></div>
109 |     <h4>Alternative</h4>
110 | 
111 |     <div class="tooltips_cell col-md-12">  
112 |     <a class="tooltips-bottom  tooltips-always" data-tooltips="...还可以这样提示">还可以这样提示</a> 
113 |     </div>
114 | 
115 | <div class="clearfix"></div>
116 | 
117 | 
118 | 
119 | 
120 | 
121 | </div>
122 | 
123 | <div class="container" style="padding-bottom: 100px;">
124 |         <h4>Using</h4>
125 |         <p class="titie">在HTML上添加tooltips.min.css</p>
126 |         <div class="col-md-12">
127 | <pre><code class="text-primary">&lt;link rel=&quot;<span class="text-danger">stylesheet</span>&quot; href=&quot;<span class="text-danger">tooltips.min.css</span>&quot;&gt;</code></pre>
128 | 
129 |         </div>
130 |         <p class="titie">在 stylus 中使用</p>
131 |         <div class="col-md-12">
132 |         <pre><code class="text-primary">@import &quot;node_modules/tooltips&quot;</code></pre>
133 | 
134 |         </div>
135 |         <p class="titie">给标签添加 data-tooltips 和 class="tooltips-top" 属性</p>
136 |         <div class="col-md-12">
137 | <pre><code class="text-primary">&lt;span data-tooltips=&quot;<span class="text-danger">top</span>&quot; class=&quot;<span class="text-danger">tooltips-top</span>&quot;" &gt;tooltips&lt;/span&gt;</code></pre>
138 |         </div>
139 | </div>
140 | </body>
141 | 
142 | </html>
143 | 
144 | 
145 | 
146 | 
147 | 
148 | 
149 | 
150 | 
151 | 
152 | 
153 | 
154 | 
155 | 
156 | 
157 | 
158 | 
159 | 
160 | 
161 | 


--------------------------------------------------------------------------------