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

2015-10-13 17:49:13 +08:00
 sox

纯 CSS 实现 ?

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

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

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

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

预览 - 代码

4511 次点击
所在节点    分享创造
21 条回复
chairuosen
2015-10-13 17:57:30 +08:00
awesome!
sox
2015-10-13 18:04:17 +08:00
@chairuosen (｡･ω･｡)ﾉ♡
liangguan5
2015-10-13 18:07:08 +08:00
赞，用的到
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
@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 就是这个写法的

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

https://www.v2ex.com/t/227727

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

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

© 2021 V2EX