stylus css tooltips 纯css工具提示_html/css_WEB-ITnose
程序员文章站
2022-06-10 11:23:58
...
tooltips
纯css工具提示 bubbles-tooltips 查看效果
演示
安装
npm install tooltips --save
使用
在 gulp 中使用
gulp
var gulp = require('gulp');var gutil = require('gulp-util');var stylus = require('gulp-stylus');var tooltips = require('tooltips');var autoprefixer = require('gulp-autoprefixer');var browserslist = ['Android 2.3', 'Android >= 4', 'Chrome >= 20', 'Firefox >= 24', 'Explorer >= 8', 'iOS >= 6', 'Opera >= 12', 'Safari >= 6'];gulp.src('./public/styl/*.styl') .pipe(stylus({ use:[tooltips()], compress:true })) .pipe(autoprefixer({ browsers: browserslist, cascade: false }).on('error',gutil.log)) .pipe(gulp.dest('./public/css'));
index.styl
@import 'tooltips'.banner{ height 140px font-size 24px}
常规使用方法
直接在页面中引用 tooltips.min.css
tooltips
在页面中使用
新增背景颜色提示
开发
$ npm run build$ npm run watch
推荐阅读
-
html title换行方法 如a链接标签内title属性鼠标悬停提示内容换行_html/css_WEB-ITnose
-
纯CSS写的下拉菜单_html/css_WEB-ITnose
-
让ICON生动起来 纯CSS实现带动画的天气图标_html/css_WEB-ITnose
-
求一个简单的纯CSS3的实现_html/css_WEB-ITnose
-
纯DIV+CSS实现圆角!_html/css_WEB-ITnose
-
一款纯css3实现的超炫动画背画特效_html/css_WEB-ITnose
-
Tiff ? 值得你体验一下的可视化的字体对比工具_html/css_WEB-ITnose
-
web报表工具FineReport常用函数的用法总结(报表函数)_html/css_WEB-ITnose
-
纯css3开发的响应式设计动画菜单(支持ie8)_html/css_WEB-ITnose
-
使用纯css制作简易步骤流程_html/css_WEB-ITnose