zoukankan      html  css  js  c++  java
  • microtip Tooltip工具提示样式

    最近开发项目,想增加滑动提示文字,类似img alt和i的title,但是效果都不是很理想,当然jq也有,但是用起来比较繁琐,使用不是特别方便

    于是在github上看到了一个不错的库:

    https://github.com/sevck/microtip

    国外写的一个纯css3的tooltips

    安装使用很简单:

    Installation

    via npm

    npm install microtip

    via yarn

    yarn add microtip

    via CDN

    https://unpkg.com/microtip/microtip.css
    

    direct download

    curl -o microtip https://github.com/ghosh/microtip/blob/master/microtip.css

    Setup

    in PostCSS

    @import 'microtip';

    in Webpack

    import microtip from 'microtip/microtip.css'

    in SCSS

    @import 'microtip/microtip';

    Usage

       import:
    <link rel="stylesheet" type="text/css" href="css/microtip.css">
    <button aria-label="Hey tooltip!" data-microtip-position="up" role="tooltip">

    也支持调整显示的位置,滑动出现的时间、字体大小等等

    Customization

    Microtip uses css variables, which allows you to customize the behavior of the tooltip as per your needs.

    VariableDescriptionDefault Value
    --microtip-transition-duration Specifies the duration of the tootltip transition .18s
    --microtip-transition-delay The delay on hover before showing the tooltip 0s
    --microtip-transition-easing The easing applied while transitioning the tooltip ease-in-out
    --microtip-font-size Sets the font size of the text in tooltip 13px
    --microtip-font-weight The font weight of the text in tooltip normal
    --microtip-text-transform Controls the casing of the text none

    效果:

    鼠标移动文字提示,或者重写覆盖样式都是可以的

  • 相关阅读:
    大数据量下的SQL Server数据库自身优化
    NodeJS 学习笔记
    SOA、ESB、NServiceBus、云计算 总结
    .NET及.NET Core系统架构
    TCP/IP协议、HTTP协议、SOCKET通讯详解
    web压测工具http_load
    前端面试问题答案汇总--通识篇
    前端面试问题答案汇总--高级篇
    前端面试问题答案汇总--进阶篇
    前端面试问题答案汇总--基础版
  • 原文地址:https://www.cnblogs.com/sevck/p/9758807.html
Copyright © 2011-2022 走看看