V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
sox
V2EX  ›  分享创造

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

  •  1
     
  •   sox ·
    egoist · 2015-10-13 17:49:13 +08:00 · 4663 次点击
    这是一个创建于 3357 天前的主题,其中的信息可能已经有所发展或是发生改变。

    纯 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
        1
    chairuosen  
       2015-10-13 17:57:30 +08:00
    awesome!
    sox
        2
    sox  
    OP
       2015-10-13 18:04:17 +08:00 via Android
    @chairuosen (。・ω・。)ノ♡
    liangguan5
        3
    liangguan5  
       2015-10-13 18:07:08 +08:00 via iPhone
    赞,用的到
    fszaer
        4
    fszaer  
       2015-10-13 18:08:50 +08:00
    棒 已星
    zythum
        5
    zythum  
       2015-10-13 18:15:46 +08:00
    啥时候样式能这么玩了啊,落伍了 。
    sox
        6
    sox  
    OP
       2015-10-13 18:17:37 +08:00
    @zythum 菊苣出现了。。
    kokdemo
        7
    kokdemo  
       2015-10-13 18:21:33 +08:00
    content: attr(data-tip); 核心是这一句啊
    miyuki
        8
    miyuki  
       2015-10-13 18:26:13 +08:00
    已星
    神 id
    zythum
        9
    zythum  
       2015-10-13 18:26:18 +08:00
    @sox
    @kokdemo

    我去查了下 https://developer.mozilla.org/zh-CN/docs/Web/CSS/attr 发现其实是个挺早就支持了的 api 。
    但来真的是落伍了....
    learnshare
        10
    learnshare  
       2015-10-13 18:30:00 +08:00
    squid157
        11
    squid157  
       2015-10-13 18:40:44 +08:00
    .... with a keyboard .... 这也是哈哈哈
    不错 star 之 然而并没有看出来居中和放在侧面哪个更好
    sox
        12
    sox  
    OP
       2015-10-13 18:42:54 +08:00 via Android
    @squid157 每个人审美不同(ಡωಡ)
    fszaer
        13
    fszaer  
       2015-10-13 20:10:34 +08:00
    话说手贱点一下 button ,边框高亮就暴露了隐藏的 tip 了=w=
    sox
        14
    sox  
    OP
       2015-10-13 20:19:20 +08:00
    @fszaer 好吧,我去掉了 outline XD
    GUMU
        15
    GUMU  
       2015-10-14 09:38:00 +08:00
    想星一下可是没有找到地址啊
    sox
        16
    sox  
    OP
       2015-10-14 09:52:00 +08:00
    LucasW
        17
    LucasW  
       2015-10-14 10:53:23 +08:00
    出现的时候三角和提示框有 1px 像素差
    要真正可用还是得兼容性高啊
    sox
        18
    sox  
    OP
       2015-10-14 11:59:12 +08:00
    @LucasW 这和兼容性没关系吧。。

    我是没办法改善这个了,不过可以用 `.data-tip-no-animation` 或者 `.data-tip-fast` 来 polyfill 。。
    sox
        19
    sox  
    OP
       2015-10-14 12:05:12 +08:00
    @LucasW 似乎也是兼容问题, Firefox 上就没有问题。。
    g0thic
        20
    g0thic  
       2015-10-15 00:58:05 +08:00
    @zythum Github 的 hover tip 就是这个写法的
    lx19930805
        21
    lx19930805  
       2017-11-11 19:51:07 +08:00
    @sox 如果是单纯的想引用这个 css 该怎么做呢?因为没用过类似的框架什么的,而且也不是自己的网站什么的(无法安装)。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2725 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 12:16 · PVG 20:16 · LAX 04:16 · JFK 07:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.