CSS

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

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

前言

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

CSS实现html指令式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也可以搞定了,速度上车,试试吧。

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

(540)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

邮箱地址不会被公开。 必填项已用*标注