专栏首页web秀CSS实现html指令式Tips文字提示

CSS实现html指令式Tips文字提示

前言

一个小小tips,在网页中能有意想不到的效果,能很好的引导客户,说明功能等等。

html代码

<div class="container">
    <div class="top">
        <button tooltip="上左">上左</button>
        <button tooltip="上边" placement="top">上边</button>
        <button tooltip="上右" placement="top-right">上右</button>
    </div>
    <div class="left">
        <button tooltip="左上" placement="left-top">左上</button>
        <button tooltip="左边" placement="left" effect="light">左边</button>
        <button tooltip="左右" placement="left-bottom">左下</button>
    </div>
    <div class="right">
        <button tooltip="右上" placement="right-top">右上</button>
        <button tooltip="右边" placement="right" effect="light">右边</button>
        <button tooltip="右下" placement="right-bottom">右下</button>
    </div>
    <div class="bottom">
        <button tooltip="下左" placement="bottom-left">下左</button>
        <button tooltip="下边" placement="bottom" effect="light">下边</button>
        <button tooltip="下右" placement="bottom-right">下右</button>
    </div>
</div>

css代码

由于内容较多,只提供主要部分

气泡样式

[tooltip]::after {
  display: none;
  content: attr(tooltip);
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 15px;
  max-width: 200px;
  border-radius: 4px;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
  z-index: 100;
}

气泡位置(示例上)

.tooltip-placement-top,
[tooltip]:not([placement])::after,
[tooltip][placement=""]::after,
[tooltip][placement="top"]::after {
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 0);
}
.tooltip-placement-top-right,
[tooltip][placement="top-right"]::after {
    bottom: calc(100% + 10px);
    left: 100%;
    transform: translate(-100%, 0);
}
.tooltip-placement-top-left,
[tooltip][placement="top-left"]::after {
    bottom: calc(100% + 10px);
    left: 0;
    transform: translate(0, 0);
}

气泡动画(示例上)

[tooltip][placement^="top"]::after,
[tooltip][placement^="top"]::before {
    animation: anime-top 300ms ease-out forwards;
}
@keyframes anime-top {
  from {
      opacity: .5;
      bottom: 150%;
  }
}

三角形样式

[tooltip]::before {
  display: none;
  content: '';
  position: absolute;
  border: 5px solid transparent;
  border-bottom-width: 0;
  z-index: 100;
}

三角形位置(示例上)

.triangle-placement-top,
[tooltip]:not([placement])::before,
[tooltip][placement=""]::before,
[tooltip][placement="top"]::before {
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translate(-50%, 0);
}
.triangle-placement-top-left,
[tooltip][placement="top-left"]::before {
    bottom: calc(100% + 5px);
    left: 10px;
}
.triangle-placement-top-right,
[tooltip][placement="top-right"]::before {
    bottom: calc(100% + 5px);
    right: 10px;
}

总结

css的功能越来越强大,是不是曾经以为这样的效果只能用js实现了,现在用css也可以搞定了,速度上车,试试吧。

演示程序:演示代码 下载源码:下载源码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VUE开发一个组件——Vue PC城市选择控件

    前面用vue开发了三四个组件了,都是H5的,现在来看看PC是如何玩转组件的?其实和H5相同,样式不同而已。

    Javanx
  • CSS3径向渐变实现优惠券波浪造型

    很多人看到左右的波浪边框,第一想法,应该是用图片实现。现在我们就打破这一想法,用CSS搞定这个效果。

    Javanx
  • 从浅到深的学习 CSS3阴影(box-shadow)

    知识点: 1、外 box-shadow 前四个参数:x 偏移值、y 偏移值 、模糊半径、扩张半径。 2、单侧投影的核心是第四个参数:扩张半径。这个参数会根据...

    Javanx
  • 数据库PostrageSQL-服务器配置资源消耗

    shared_buffers (integer) 设置数据库服务器将使用的共享内存缓冲区量。默认通常是 128 兆字节(128MB),但是如果你的内核设置不支...

    cwl_java
  • VR看房,虽能拓客,却难救房企

    (VRPinea2020年3月2日讯)2020年的新冠肺炎疫情已持续40余日,中国大陆诸多行业面临前所未有的危机。虽然通过这次疫情,我们能够看到中国的部分工业体...

    VRPinea
  • vue中 localStorage的使用方法(详解)

    vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了c...

    honey缘木鱼
  • 如何使用Metasploit进行汽车安全性测试?

    针对汽车的攻击和入侵是当前最前沿的领域和最热门的话题之一。随着自动驾驶汽车技术的发展,在未来这个领域将变得更加重要。作为汽车黑客快速发展的一部分,我最喜欢的黑客...

    FB客服
  • Docker CheatSheet | Docker 配置与实践清单

    Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源。Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、...

    王下邀月熊
  • Docker初步学习

    公司的服务都使用Docker部署,虽然这块和我关系不大,但是我在测试环境启动时,老是会报错,所以我打算学习一下基本的Docker知识,方便自己在测试环境调试。

    呼延十
  • localStorage和sessionStorage用法小总结

    之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不...

    无邪Z

扫码关注云+社区

领取腾讯云代金券