tooltips 提示

468122151 发布于2019-08-01 15:12 / 834人阅读

摘要：纯工具提示查看效果演示安装使用在中使用常规使用方法直接在页面中引用我是提示在页面中使用工具提示工具提示工具提示还可以这样提示还可以这样提示新增背景颜色提示开发

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49828.html

如何使用CSS创建巧妙的动画提示框

摘要：我们巧妙的提示框打算使用属性选择器也就是方括号表示法。相对性这是用在提示框的父元素上的。向上向下提示框要用到关键帧，而向左向右提示框使用关键帧。注意，在这些关键帧中，我们只定义了提示框所需的终止状态。原文：https://webdesign.tutsplus.co...原作：Jase Smith翻译：Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时，亦或是当他们在点击...

wmui 2019-08-29 12:51 评论0 收藏0
如何使用CSS创建巧妙的动画提示框

摘要：我们巧妙的提示框打算使用属性选择器也就是方括号表示法。相对性这是用在提示框的父元素上的。向上向下提示框要用到关键帧，而向左向右提示框使用关键帧。注意，在这些关键帧中，我们只定义了提示框所需的终止状态。原文：https://webdesign.tutsplus.co...原作：Jase Smith翻译：Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时，亦或是当他们在点击...

vpants 2019-08-01 17:05 评论0 收藏0
css--提示工具

摘要：一提示工具上提示工具代码如下上提示工具提示文本运行结果二右提示工具代码如下提示工具右提示工具提示文本运行结果总结使用容器元素并添加类。在鼠标移动到上时显示提示信息。属性用于为提示框添加圆角。一、提示工具 1、上提示工具代码如下 body{ margin:0; text-align:center; ...

shadajin 2019-08-02 10:55 评论0 收藏0
css--提示工具

摘要：一提示工具上提示工具代码如下上提示工具提示文本运行结果二右提示工具代码如下提示工具右提示工具提示文本运行结果总结使用容器元素并添加类。在鼠标移动到上时显示提示信息。属性用于为提示框添加圆角。一、提示工具 1、上提示工具代码如下 body{ margin:0; text-align:center; ...

xinhaip 2019-08-30 15:54 评论0 收藏0
tooltips 提示

摘要：纯工具提示查看效果演示安装使用在中使用常规使用方法直接在页面中引用我是提示在页面中使用工具提示工具提示工具提示还可以这样提示还可以这样提示新增背景颜色提示开发 tooltips showImg(https://segmentfault.com/img/remote/1460000006768818); showImg(https://segmentfault.com/img/remot...

ShevaKuilin 2019-08-30 12:58 评论0 收藏0
stylus css tooltips 工具提示

摘要：纯工具提示查看效果演示安装使用在中使用常规使用方法直接在页面中引用我是提示在页面中使用工具提示工具提示工具提示还可以这样提示还可以这样提示新增背景颜色提示开发 tooltips showImg(https://jaywcjlove.github.io/sb/ico/stylus.svg); showImg(http://jaywcjlove.github.io/sb/license/m...

singerye 2019-08-30 12:57 评论0 收藏0