tooltips 提示

468122151 發(fā)布于2019-08-01 15:12 / 780人閱讀

摘要：純工具提示查看效果演示安裝使用在中使用常規(guī)使用方法直接在頁(yè)面中引用我是提示在頁(yè)面中使用工具提示工具提示工具提示還可以這樣提示還可以這樣提示新增背景顏色提示開(kāi)發(fā)

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
}

常規(guī)使用方法

直接在頁(yè)面中引用tooltips.min.css


tooltips

在頁(yè)面中使用

新增背景顏色提示

開(kāi)發(fā)

$ npm run build
$ npm run watch

GPU云服務(wù)器云服務(wù)器 tooltip提示 Tooltip tooltips button tooltip

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/49828.html

相關(guān)文章

如何使用CSS創(chuàng)建巧妙的動(dòng)畫(huà)提示框

摘要：我們巧妙的提示框打算使用屬性選擇器也就是方括號(hào)表示法。相對(duì)性這是用在提示框的父元素上的。向上向下提示框要用到關(guān)鍵幀，而向左向右提示框使用關(guān)鍵幀。注意，在這些關(guān)鍵幀中，我們只定義了提示框所需的終止?fàn)顟B(tài)。原文：https://webdesign.tutsplus.co...原作：Jase Smith翻譯：Stypstive 當(dāng)你的用戶(hù)需要漂亮的圖標(biāo)給出額外的文字信息時(shí)，亦或是當(dāng)他們?cè)邳c(diǎn)擊...

wmui 2019-08-29 12:51 評(píng)論0 收藏0
如何使用CSS創(chuàng)建巧妙的動(dòng)畫(huà)提示框

摘要：我們巧妙的提示框打算使用屬性選擇器也就是方括號(hào)表示法。相對(duì)性這是用在提示框的父元素上的。向上向下提示框要用到關(guān)鍵幀，而向左向右提示框使用關(guān)鍵幀。注意，在這些關(guān)鍵幀中，我們只定義了提示框所需的終止?fàn)顟B(tài)。原文：https://webdesign.tutsplus.co...原作：Jase Smith翻譯：Stypstive 當(dāng)你的用戶(hù)需要漂亮的圖標(biāo)給出額外的文字信息時(shí)，亦或是當(dāng)他們?cè)邳c(diǎn)擊...

vpants 2019-08-01 17:05 評(píng)論0 收藏0
css--提示工具

摘要：一提示工具上提示工具代碼如下上提示工具提示文本運(yùn)行結(jié)果二右提示工具代碼如下提示工具右提示工具提示文本運(yùn)行結(jié)果總結(jié)使用容器元素并添加類(lèi)。在鼠標(biāo)移動(dòng)到上時(shí)顯示提示信息。屬性用于為提示框添加圓角。一、提示工具 1、上提示工具代碼如下 body{ margin:0; text-align:center; ...

shadajin 2019-08-02 10:55 評(píng)論0 收藏0
css--提示工具

摘要：一提示工具上提示工具代碼如下上提示工具提示文本運(yùn)行結(jié)果二右提示工具代碼如下提示工具右提示工具提示文本運(yùn)行結(jié)果總結(jié)使用容器元素并添加類(lèi)。在鼠標(biāo)移動(dòng)到上時(shí)顯示提示信息。屬性用于為提示框添加圓角。一、提示工具 1、上提示工具代碼如下 body{ margin:0; text-align:center; ...

xinhaip 2019-08-30 15:54 評(píng)論0 收藏0
tooltips 提示

摘要：純工具提示查看效果演示安裝使用在中使用常規(guī)使用方法直接在頁(yè)面中引用我是提示在頁(yè)面中使用工具提示工具提示工具提示還可以這樣提示還可以這樣提示新增背景顏色提示開(kāi)發(fā) tooltips showImg(https://segmentfault.com/img/remote/1460000006768818); showImg(https://segmentfault.com/img/remot...

ShevaKuilin 2019-08-30 12:58 評(píng)論0 收藏0
stylus css tooltips 工具提示

摘要：純工具提示查看效果演示安裝使用在中使用常規(guī)使用方法直接在頁(yè)面中引用我是提示在頁(yè)面中使用工具提示工具提示工具提示還可以這樣提示還可以這樣提示新增背景顏色提示開(kāi)發(fā) tooltips showImg(https://jaywcjlove.github.io/sb/ico/stylus.svg); showImg(http://jaywcjlove.github.io/sb/license/m...

singerye 2019-08-30 12:57 評(píng)論0 收藏0