纯css实现tooltip
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist update Feb 10, 2017
src
.gitignore
LICENSE
README.md
demo.html
gulpfile.js
package.json

README.md

CSS Tipsy

利用CSS3, :before, :after伪类,实现纯CSS的tooltip效果

DEMO

可用性

兼容高级浏览器,受父级元素影响

构建

自定义

修改文件src/tipsy.scss 文件

  • $background 背景色,默认rgba(#111, 0.9)
  • $threshold 动画偏移量 , 默认10px

(c)npm install gulp

使用

head中加入样式表

<link href="./dist/tipsy.css" rel="stylesheet">

在非overflow:hidden 和 闭合标签的元素上添加mo-tipsy--相关样式以及data-tipsy属性(代替title属性)

<button class="mo-tipsy--top" data-tipsy="我将显示在上面">hover</button>

可用样式

.mo-tipsy, .mo-tipsy--top : 正上方显示
.mo-tipsy--left: 左边显示
.mo-tipsy--right: 右边显示
.mo-tipsy--bottom: 正下方显示
.mo-tipsy--top-left: 左上角显示
.mo-tipsy--top-right: 右上角显示
.mo-tipsy--bottom-left: 左下角显示
.mo-tipsy--bottom-right: 右下角显示

//尺寸
.mo-tipsy--small : //小尺寸, 80px
.mo-tipsy--medium : //中等尺寸, 160px
.mo-tipsy--large : //大尺寸, 260px
//尺寸样式需要配合 .mo-tipsy, .mo-tipsy--[top|bottom|left|right...] 一起使用