使用element的提示框并修改css

使用el-tooltip来做提示框:

html 复制代码
<el-tooltip popper-class="popper" content="敬请期待" placement="right">
    <div>
        <i class="iconfont icon-lianjie-01"></i>
        <span>输入链接</span>
    </div>
</el-tooltip>

去掉默认小三角和背景样式:

css 复制代码
.popper {
    width: 268.5px !important;
    background: #F0F0F0 !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    color: #333333 !important;
    padding: 14px 22px !important;
    border: 1px solid #E8E8E8 !important;
}

.popper .popper__arrow::after, 
.popper .popper__arrow {
    border-right-color: #F0F0F0 !important;
}
相关推荐
cidy_982 分钟前
将 Figma 接入 Codex MCP:从 `/plugins` 到本地插件配置的完整教程
前端
vivo互联网技术3 分钟前
动效开发不踩坑:几种动效实现方案对比与实战选型
前端·性能优化·动效
Csvn6 分钟前
【Vue3】Composition API vs Options API —— 什么场景该选哪个
前端
Csvn7 分钟前
Vue3 迁移血泪史:v-model 的 .sync 陷阱,90% 升级项目都会踩
前端·vue.js
光影少年7 分钟前
js单线程,为什在node环境下的js可以处理高并发请求?
前端·javascript·掘金·金石计划
vim怎么退出20 分钟前
Dive into React——事件系统
前端·react.js·源码阅读
KaMeidebaby23 分钟前
卡梅德生物技术快报|重组蛋白的表达和纯化:工艺调试全记录:大肠杆菌体系重组蛋白的表达和纯化参数标定(肠激酶轻链案例)
前端·人工智能·算法·数据挖掘·数据分析
Xzh042327 分钟前
Web 前端开发 — 期末复习指南(Html、Css、Js)
css·html5·web·js·期末
Cobyte28 分钟前
19.Vue Vapor 的实现原理原来这么简单
前端·javascript·vue.js
JackieDYH29 分钟前
uniapp vue3 常用的生命周期和作用使用时机
javascript·vue.js·uni-app