data-tip.css : 纯 CSS 实现的工具提示 tooltip

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3328 天前的主题，其中的信息可能已经有所发展或是发生改变。

纯 CSS 实现 ?

那你肯定用过 hint.css ，不过它是长这样的:

hint.css

我更喜欢箭头居中显示，所以造了这个轮子:

我叫她 data-tip，你可以这样使用她:

<button class="data-tip data-tip-bottom" data-tip="Tips To Show">
  My Custom Button
</button>

预览 - 代码

第 1 条附言 · 2015-10-13 19:34:01 +08:00

现在不用添加 data-tip 这个 class 了

第 2 条附言 · 2015-10-13 20:33:36 +08:00

我又加上了 data-tip-rounded, 似乎没有 missing feature 了 :doge:

21 条回复 • 2017-11-11 19:51:07 +08:00

chairuosen

2015-10-13 17:57:30 +08:00

awesome!

sox

2015-10-13 18:04:17 +08:00 via Android

@chairuosen (｡･ω･｡)ﾉ♡

liangguan5

2015-10-13 18:07:08 +08:00 via iPhone

赞，用的到

fszaer

2015-10-13 18:08:50 +08:00

棒已星

zythum

2015-10-13 18:15:46 +08:00

啥时候样式能这么玩了啊，落伍了。

sox

2015-10-13 18:17:37 +08:00

@zythum 菊苣出现了。。

kokdemo

2015-10-13 18:21:33 +08:00

content: attr(data-tip); 核心是这一句啊

miyuki

2015-10-13 18:26:13 +08:00

已星
神 id

zythum

2015-10-13 18:26:18 +08:00

@sox
@kokdemo

我去查了下 https://developer.mozilla.org/zh-CN/docs/Web/CSS/attr 发现其实是个挺早就支持了的 api 。
但来真的是落伍了....

learnshare

2015-10-13 18:30:00 +08:00

@kokdemo 正解
https://developer.mozilla.org/en-US/docs/Web/CSS/attr 兼容性还不错

squid157

2015-10-13 18:40:44 +08:00

.... with a keyboard .... 这也是哈哈哈
不错 star 之然而并没有看出来居中和放在侧面哪个更好

sox

2015-10-13 18:42:54 +08:00 via Android

@squid157 每个人审美不同(ಡωಡ)

fszaer

2015-10-13 20:10:34 +08:00

话说手贱点一下 button ，边框高亮就暴露了隐藏的 tip 了=w=

sox

2015-10-13 20:19:20 +08:00

@fszaer 好吧，我去掉了 outline XD

GUMU

2015-10-14 09:38:00 +08:00

想星一下可是没有找到地址啊

sox

2015-10-14 09:52:00 +08:00

@GUMU https://github.com/egoist/data-tip.css >3<

LucasW

2015-10-14 10:53:23 +08:00

出现的时候三角和提示框有 1px 像素差
要真正可用还是得兼容性高啊

sox

2015-10-14 11:59:12 +08:00

@LucasW 这和兼容性没关系吧。。

我是没办法改善这个了，不过可以用 `.data-tip-no-animation` 或者 `.data-tip-fast` 来 polyfill 。。

sox

2015-10-14 12:05:12 +08:00

@LucasW 似乎也是兼容问题， Firefox 上就没有问题。。

g0thic

2015-10-15 00:58:05 +08:00

@zythum Github 的 hover tip 就是这个写法的

lx19930805

2017-11-11 19:51:07 +08:00

@sox 如果是单纯的想引用这个 css 该怎么做呢？因为没用过类似的框架什么的，而且也不是自己的网站什么的（无法安装）。