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

2015 年 10 月 13 日
 sox

纯 CSS 实现 ?

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

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

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

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

预览 - 代码

5233 次点击
所在节点    分享创造
21 条回复
chairuosen
2015 年 10 月 13 日
awesome!
sox
2015 年 10 月 13 日
@chairuosen (｡･ω･｡)ﾉ♡
liangguan5
2015 年 10 月 13 日
赞，用的到
fszaer
2015 年 10 月 13 日
棒 已星
zythum
2015 年 10 月 13 日
啥时候样式能这么玩了啊，落伍了 。
sox
2015 年 10 月 13 日
@zythum 菊苣出现了。。
kokdemo
2015 年 10 月 13 日
content: attr(data-tip); 核心是这一句啊
miyuki
2015 年 10 月 13 日
已星
神 id
zythum
2015 年 10 月 13 日
@sox
@kokdemo

我去查了下 https://developer.mozilla.org/zh-CN/docs/Web/CSS/attr 发现其实是个挺早就支持了的 api 。
但来真的是落伍了....
learnshare
2015 年 10 月 13 日
@kokdemo 正解
https://developer.mozilla.org/en-US/docs/Web/CSS/attr 兼容性还不错
squid157
2015 年 10 月 13 日
.... with a keyboard .... 这也是哈哈哈
不错 star 之 然而并没有看出来居中和放在侧面哪个更好
sox
2015 年 10 月 13 日
@squid157 每个人审美不同(ಡωಡ)
fszaer
2015 年 10 月 13 日
话说手贱点一下 button ，边框高亮就暴露了隐藏的 tip 了=w=
sox
2015 年 10 月 13 日
@fszaer 好吧，我去掉了 outline XD
GUMU
2015 年 10 月 14 日
想星一下可是没有找到地址啊
sox
2015 年 10 月 14 日
@GUMU https://github.com/egoist/data-tip.css >3<
LucasW
2015 年 10 月 14 日
出现的时候三角和提示框有 1px 像素差
要真正可用还是得兼容性高啊
sox
2015 年 10 月 14 日
@LucasW 这和兼容性没关系吧。。

我是没办法改善这个了，不过可以用 `.data-tip-no-animation` 或者 `.data-tip-fast` 来 polyfill 。。
sox
2015 年 10 月 14 日
@LucasW 似乎也是兼容问题， Firefox 上就没有问题。。
g0thic
2015 年 10 月 15 日
@zythum Github 的 hover tip 就是这个写法的

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://study.congcong.us/t/227727

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX