tooltips.css

纯css打造的工具提示

Github Project

Example

bottom-right
bottom
bottom-left
right
.
left
top-right
top
top-left

Color tools

error
warning
info
success

Size tools

Small
Medium
Large

Alternative

还可以这样提示

Using

在HTML上添加tooltips.min.css

<link rel="stylesheet" href="tooltips.min.css">

在 stylus 中使用

@import "tooltips"

给标签添加 data-tooltips 和 class="tooltips-top" 属性

<span data-tooltips="top" class="tooltips-top" >tooltips</span>

背景颜色提示工具 data-tooltips 和 class="tooltips-error" class="tooltips-warning" class="tooltips-info" class="tooltips-success" 属性

<span data-tooltips="error" class="tooltips-top tooltips-error" >error</span>
<span data-tooltips="warning" class="tooltips-top tooltips-warning" >warning</span>
<span data-tooltips="info" class="tooltips-top tooltips-info" >info</span>
<span data-tooltips="success" class="tooltips-top tooltips-success" >success</span>