WRZ博客

快乐阅读!

纯css实现tooltip提示

2019-8-6 WRZ 代码

css实现优势是页面加载比较快 使用起来很方便

效果

使用方法

1.把css加载到你模板里面

[tooltip]{position:relative;}[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]::before{display:none;content:'';position:absolute;border:5px solid transparent;border-bottom-width:0;z-index:100;}[tooltip]:hover::after{display:block;}[tooltip]:hover::before{display:block;}[tooltip][placement^="top"]::after,[tooltip][placement^="top"]::before{animation:anime-top 300ms ease-out forwards;}[tooltip][placement^="right"]::after,[tooltip][placement^="right"]::before{animation:anime-right 300ms ease-out forwards;}[tooltip][placement^="bottom"]::after,[tooltip][placement^="bottom"]::before{animation:anime-bottom 300ms ease-out forwards;}[tooltip][placement^="left"]::after,[tooltip][placement^="left"]::before{animation:anime-left 300ms ease-out forwards;}.tooltip-theme-dark,[tooltip]::after{color:#fff;background-color:#313131;}.tooltip-theme-light,[tooltip][effect="light"]::after{color:#313131;background-color:#fff;border:1px solid #313131;}.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-right,[tooltip][placement="right"]::after{left:calc(100% + 10px);top:50%;transform:translate(0,-50%);}.tooltip-placement-right-top,[tooltip][placement="right-top"]::after{left:calc(100% + 10px);top:0;transform:translate(0,0);}.tooltip-placement-right-bottom,[tooltip][placement="right-bottom"]::after{left:calc(100% + 10px);top:100%;transform:translate(0,-100%);}.tooltip-placement-bottom,[tooltip][placement="bottom"]::after{top:calc(100% + 10px);left:50%;transform:translate(-50%,0);}.tooltip-placement-bottom-right,[tooltip][placement="bottom-right"]::after{top:calc(100% + 10px);left:100%;transform:translate(-100%,0);}.tooltip-placement-bottom-left,[tooltip][placement="bottom-left"]::after{top:calc(100% + 10px);left:0;transform:translate(0,0);}.tooltip-placement-left,[tooltip][placement="left"]::after{right:calc(100% + 10px);top:50%;transform:translate(0,-50%);}.tooltip-placement-left-top,[tooltip][placement="left-top"]::after{right:calc(100% + 10px);top:0;transform:translate(0,0);}.tooltip-placement-left-bottom,[tooltip][placement="left-bottom"]::after{right:calc(100% + 10px);top:100%;transform:translate(0,-100%);}.triangle-theme-dark,[tooltip]::before{border-top-color:#313131;}.triangle-theme-light,[tooltip][effect="light"]::before{border-top-color:#313131;}.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;}.triangle-placement-right,[tooltip][placement="right"]::before,.triangle-placement-right-top,[tooltip][placement="right-top"]::before,.triangle-placement-right-bottom,[tooltip][placement="right-bottom"]::before{left:calc(100% + 3px);top:50%;transform:translate(0,-50%) rotateZ(90deg);}.triangle-placement-right-top,[tooltip][placement="right-top"]::before{top:10px;}.triangle-placement-right-bottom,[tooltip][placement="right-bottom"]::before{bottom:10px;top:auto;transform:translate(0,0) rotateZ(90deg);}.triangle-placement-bottom,[tooltip][placement="bottom"]::before,.triangle-placement-bottom-left,[tooltip][placement="bottom-left"]::before,.triangle-placement-bottom-right,[tooltip][placement="bottom-right"]::before{top:calc(100% + 5px);left:50%;transform:translate(-50%,0) rotateZ(180deg);}.triangle-placement-bottom-left,[tooltip][placement="bottom-left"]::before{transform:translate(0,0) rotateZ(180deg);left:10px;}.triangle-placement-bottom-right,[tooltip][placement="bottom-right"]::before{right:10px;left:auto;}.triangle-placement-left,[tooltip][placement="left"]::before,.triangle-placement-left-top,[tooltip][placement="left-top"]::before,.triangle-placement-left-bottom,[tooltip][placement="left-bottom"]::before{right:calc(100% + 3px);top:50%;transform:translate(0,-50%) rotateZ(270deg);}.triangle-placement-left-top,[tooltip][placement="left-top"]::before{top:10px;}.triangle-placement-left-bottom,[tooltip][placement="left-bottom"]::before{bottom:10px;top:auto;transform:translate(0,0) rotateZ(270deg);}@keyframes anime-top{from{opacity:.5;bottom:150%;}}@keyframes anime-bottom{from{opacity:.5;top:150%;}}@keyframes anime-left{from{opacity:.5;right:150%;}}@keyframes anime-right{from{opacity:.5;left:150%;}}

2.需要提示的html盒子里面加上

<a tooltip="点击加载更多" placement="top"></a>

tooltip=""  里面填写你要显示的内容
placement="" 填写显示的方式 

方向填写 (上 下 左 右 )英文单词即可, 其它方向可看css 懒得写了.........

 

 

标签: 代码 教程

评论:

1梦
2019-08-14 18:30
不错 收藏了
WRZ
2019-08-14 18:36
@1梦:开学了吗?暑假上课爽不爽,O(∩_∩)O!
小王先森
2019-08-11 14:16
学习了。
WRZ
2019-08-11 16:27
@小王先森:欢迎!

发表评论: