最近开发项目,想增加滑动提示文字,类似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.

Variable Description Default 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

效果:

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

microtip Tooltip工具提示样式的更多相关文章

  1. Highchart :tooltip工具提示

    Highcharts翻译系列之十六:tooltip工具提示tooltip工具提示 参数 描述 默认值 animation 启用或禁用提示的动画.这对大数据量的图表很有用 true background ...

  2. 如何在 pyqt 中自定义工具提示 ToolTip

    前言 Qt 自带的工具提示样式不太好看,就算加了样式表也时不时会失效,同时工具提示没有阴影,看起来就更难受了.所以本篇博客将会介绍自定义工具提示的方法,效果如下图所示: 实现过程 工具提示其实就是一个 ...

  3. 关于【bootstrap】中,【tooltip】的不算bug的bug的个人看法

    先说下遇到这个问题的背景吧. 就是在页面中有个div,这个div右上角(或者其他位置)有个 × 的图标(这个图标添加tooltip工具提示),光标移到这个图标时,触发tooltip,提示“点击移除”这 ...

  4. 第二百四十五节,Bootstrap标签页和工具提示插件

    Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一.标签页选项卡 标签页也就是通常所说的选项卡功能 ...

  5. 知问前端——工具提示UI

    工具提示(tooltip),是一个非常实用的UI.它彻底扩展了HTML中的title属性,让提示更加丰富,更加可控制,全面提升了用户体验. 调用tooltip()方法 在调用tooltip()方法之前 ...

  6. Bootstrap 标签页和工具提示插件

    一.标签页 标签页也就是通常所说的选项卡功能. //基本用法 <ul class="nav nav-tabs"> <li class="active&q ...

  7. 扩展ToolBarManager、ListView和Grid控件以实现气球式的ToolTip

    原文:扩展ToolBarManager.ListView和Grid控件以实现气球式的ToolTip infragistics是全球领先的UI工具和用户体验的专家,Infragistics开发了一系列的 ...

  8. Tooltip浮动提示框效果(掌握里面的小知识)

    使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化.事件绑定.事件冒泡等技巧和知识. 特效四个关键点:显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以显示 ...

  9. QT的hint的toolTip的使用

    QString value = ''1213213231"; this->setToolTip(value);//QT自带的接口 value就是自己想要塞进的数据. 如果字符多的话 怎 ...

随机推荐

  1. python使用wget下载网络文件

    wget是一个从网络上自动下载文件的自由工具.它支持HTTP,HTTPS和FTP协议,可以使用HTTP代理. ubuntu 安装wget pip install wget 从网络或本地硬盘下载文件(并 ...

  2. ubuntu 下使用etcd

    1.安装ETCD_VER=v3.1.0 DOWNLOAD_URL=https://github.com/coreos/etcd/releases/download curl -L ${DOWNLOAD ...

  3. HDU1575 Tr A

    解题思路:矩阵快速幂模板题,见代码: #include<cstdio> #include<cstring> #include<algorithm> using na ...

  4. Markdown 效果测试

    欢迎使用 Cmd - 在线 Markdown 编辑阅读器 \[ \int e^{-x^2 - y^2} dx = \sqrt{2 \pi} \] 我们理解您需要更便捷更高效的工具记录思想,整理笔记.知 ...

  5. Eclipse自动补全设置与Eclipse源代码下载

    以前使用VisualStudio和Sublime写代码的时候有很完善的代码提示,但是最近开始使用Eclipse弄JAVA的时候发现它的代码提示不是很习惯.上网找了一些资料,修改了代码提示的方式,记录在 ...

  6. LOJ2359. 「NOIP2016」天天爱跑步【树上差分】

    LINK 思路 首先发现如果对于一个节点,假设一个节点需要统计从字数内来的贡献 需要满足\(dep_u - dep_s = w_u\) 这个条件其实可以转化成\(dep_u - w_u = dep_s ...

  7. apache与nginx对比优势及劣势

    1.nginx相对于apache的优点:轻量级,同样起web 服务,比apache占用更少的内存及资源抗并发,nginx 处理请求是异步非阻塞的,而apache 则是阻塞型的,在高并发下nginx 能 ...

  8. Mysql-Proxy 读写分离的各种坑,特别是复制延迟时

    延迟问题读写分离不能回避的问题之一就是延迟,可以考虑Google提供的SemiSyncReplicationDesign补丁. 端口问题MySQL-Proxy缺省使用的是4040端口,如果你想透明的把 ...

  9. tidb 集群扩容

    1. tidb 新增节点 a. 编辑 inventory.ini [tidb_servers] 10.0.230.14 10.0.230.15 10.10.230.20 b. 初始化新增节点 ansi ...

  10. hashids 了解

    用于隐藏真实的id 原理是从数字经过一个加盐(salted)算法产生一个哈希(hash)字符串.这样算法就是通过混淆使结果具有不可预测性,而唯一性依然由数字本身来达成,从而得到(类似 youtube ...