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

V2EX = way to explore

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

For Existing Member Sign In

爱意满满的作品展示区。

This topic created in 3856 days ago, the information mentioned may be changed or developed.

纯 CSS 实现 ?

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

hint.css

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

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

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

预览 - 代码

Supplement 1 · Oct 13, 2015

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

Supplement 2 · Oct 13, 2015

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

21 replies • 2017-11-11 19:51:07 +08:00

chairuosen

Oct 13, 2015

awesome!

sox

Oct 13, 2015 via Android

@chairuosen (｡･ω･｡)ﾉ♡

liangguan5

Oct 13, 2015 via iPhone

赞，用的到

fszaer

Oct 13, 2015

棒已星

zythum

Oct 13, 2015

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

sox

Oct 13, 2015

@zythum 菊苣出现了。。

kokdemo

Oct 13, 2015

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

miyuki

Oct 13, 2015

已星
神 id

zythum

Oct 13, 2015

@sox
@kokdemo

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

learnshare

Oct 13, 2015

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

squid157

Oct 13, 2015

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

sox

Oct 13, 2015 via Android

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

fszaer

Oct 13, 2015

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

sox

Oct 13, 2015

@fszaer 好吧，我去掉了 outline XD

GUMU

Oct 14, 2015

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

sox

Oct 14, 2015

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

LucasW

Oct 14, 2015

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

sox

Oct 14, 2015

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

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

sox

Oct 14, 2015

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

g0thic

Oct 15, 2015

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

lx19930805

Nov 11, 2017

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