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

V2EX = way to explore

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

现在注册

已注册用户请登录

爱意满满的作品展示区。

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

纯 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 日

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

第 2 条附言 · 2015 年 10 月 13 日

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

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

chairuosen

2015 年 10 月 13 日

awesome!

sox

2015 年 10 月 13 日 via Android

@chairuosen (｡･ω･｡)ﾉ♡

liangguan5

2015 年 10 月 13 日 via iPhone

赞，用的到

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 日 via Android

@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 就是这个写法的

lx19930805

2017 年 11 月 11 日

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