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

    效果:

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

  • 相关阅读:
    12306-单
    12306-票
    12306-车
    12306-人
    12306-目录
    a+=b 是什么意思?
    开启hadoop和Hbase集群的lzo压缩功能(转)
    HBase性能优化方法总结(转)
    Spark向HDFS中存储数据
    Spark从HDFS上读取JSON数据
  • 原文地址:https://www.cnblogs.com/sevck/p/9758807.html
Copyright © 2011-2022 走看看