element-ui中Tooltip文字提示——el-tooltip的样式修改

这篇具有很好参考价值的文章主要介绍了element-ui中Tooltip文字提示——el-tooltip的样式修改。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

修改el-tooltip的背景颜色

注意:以下修改都需要在全局样式修改,因为这个组件的层级,并不是在你使用他的地方,而是和你的app同一层级,所以在当前使用的地方找不到tip提示的dom节点。文章来源地址https://www.toymoban.com/news/detail-516518.html

修改提示框中长方形框的背景颜色
.el-tooltip__popper{
        background: rgba(0,0,0,0.65) !important;
    }
修改提示框中的小三角的边框颜色
// 注意[^=top]是下三角 即提示框在上方  若提示框在下方则[^=bottom] 
.el-tooltip__popper[x-placement^=top] .popper__arrow:after{
        border-top-color:  #595959 !important;
    }

到了这里,关于element-ui中Tooltip文字提示——el-tooltip的样式修改的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Element UI】解决el-tooltip组件在鼠标快速移动场景下出现的残影问题

    当我们把el-tooltip组件直接拿来和el-table组件使用的时候,鼠标上下快速移动会出现如图残影和渐变消失的问题 如下图: 所以我们去看一下官网 我们这时候试一试将 transition 属性设置为空 代码如下: 发现渐变消失是解决了但是并没有解决鼠标快速移动产生残影的问题 最终代

    2024年02月19日
    浏览(43)
  • element-ui给禁用的按钮设置鼠标经过显示tooltip的tips提示

    情境:按钮禁用的时候显示tips提示 如果我们按照一般的做法是在el-tooltip标签中包裹设置禁用disabled属性的el-button按钮,理论上这样就能达到想要的效果,“纸上得来终觉浅,绝知此事要躬行”,让我们手动试一下,效果如下: 代码如下:   答案是不能做到! 我们在禁用按

    2024年02月12日
    浏览(62)
  • 基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框

    场景:因为有个需求就是鼠标经过可多选的 el-select 选择器时,需要有个气泡框显示已选的内容,其实 el-tooltip 气泡框可以满足需求,就是用 el-tooltip 气泡框来包裹 el-select 选择器,但是当选择器一个也没选中,即内容为空时不应该也显示气泡框,有点影响美观。应该就是若内

    2024年02月13日
    浏览(47)
  • 自定义vue指令,实现el-tooltip仅在文字溢出时显示,文字未溢出则不显示,复制即可使用

    在项目里遇到了这种需求,想到el-table里的show-overflow-tooltip属性就有这种效果,在参考了一些网上的文章以及show-overflow-tooltip跟el-tooltip的源码后,觉得使用自定义指令的方式来实现这个需求会很方便,于是便有了以下代码 2.1. 默认无参数用法 没有传递值给指令的时候,将使用

    2024年02月04日
    浏览(47)
  • Element浅尝辄止8:Tooltip 文字提示组件

    常用于展示鼠标 hover 时的提示信息。   展示多行文本或者是设置文本内容的格式 除了这些基本设置外,还有一些属性可以让使用者更好的定制自己的效果: transition  属性可以定制显隐的动画效果,默认为 fade-in-linear 。 如果需要关闭  tooltip  功能, disabled  属性可以满足

    2024年02月11日
    浏览(41)
  • element-ui tooltip的使用

    在项目的开发中,有好多地方都需要对页面标签添加一些备注信息,方便用户可以更深入的了解内容的含义。 element-ui中就用tooltip的使用,用起来很方便,且可以调整提示文字出现的文字,官方地址如下: 官方地址 实现效果如下图所示:  简单的主要代码如下: 使用 conte

    2024年02月11日
    浏览(37)
  • el-tooltip 修改宽度

    使用 popper-class 为 Tooltip 的 popper 添加类名 在当前组件新建一个 style ,不要写 scoped ,这里的样式会应用到全局,所以 class 命名一定要保证不要和全局别的类名重复 当然,也可以用 slot ,在 slot 中自定义类名

    2024年02月16日
    浏览(65)
  • element-Ui table只显示一行超出文字隐藏为...,鼠标移入显示所有内容。:show-overflow-tooltip=“true“,并设置弹出内容的宽度。

    element-UI table文字超出一行,隐藏多余文字,移入显示tips。 今天写项目的时候想实现一个table单元格文字只显示一行文字,剩余显示为...的功能,发现: 给el-table-column设置:show-overflow-tooltip=\\\"true\\\"属性可以使单元格超出的内容自动折叠显示为...当鼠标移入时单元格的上方会弹出一

    2024年02月11日
    浏览(50)
  • element-ui在table中使用tooltip

    element-ui官网上提供了tooltip-effect和show-overflow-tooltip属性   使用table中的tooltip-effect属性, el-table 标签上 加 tooltip-effect=\\\"light\\\" el-table-column标签上 加 :show-overflow-tooltip=\\\"true\\\" 如下所示 效果图如下:

    2024年02月11日
    浏览(49)
  • el-tooltip的使用(根据条件控制显示)

    一、列表型 代码如下: 效果展示: 二、树状图型 代码如下: 效果展示: 注意:均要设置所设选择器的样式 附JSON数据

    2024年02月11日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包