精华内容
下载资源
问答
  • echarts tooltip样式修改(2)

    千次阅读 2020-03-04 15:11:45
    tooltip -------> formatter来进行设置;要么写个组件,用鼠标事件mouseover和mouseout来控制组件的显示。 但是,我吧,就想用formatter。。。。 关于tooltip的配置如下: tooltip: { ...

    最近做了一个需求,UI设计是这样:
    在这里插入图片描述
    我脑袋里想到两种方式:要么用echarts里面的 ----> tooltip -------> formatter来进行设置;要么写个组件,用鼠标事件mouseover和mouseout来控制组件的显示。
    但是,我吧,就想用formatter来实现。。。。
    关于tooltip的配置如下:

                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow',
                    textStyle: {
                      color: '#ffffff'
                    }
                  },
                  backgroundColor: null,
                  // borderColor: '#FCEA00',
                  // borderWidth: 1,
                  borderRadius: 0,
                  padding: [10, 10, 10, 10],
                  textStyle: {
                    align: 'left',
                    fontSize: 14
                  },
                  formatter: function (v) {
                    var str = ''
                    v.forEach((item) => {
                      var unit = item.seriesName === '温度' ? '℃' : '%'
                      var str2 = item.marker + type + item.seriesName + ': ' + '<span style="color: ' + item.color + ';font-family:Microsoft YaHei;font-weight:700;">' + item.data[1] + unit + '</span>' + '<br/>'
                      str = str + str2
                    })
                    var y = new Date(parseInt(v[0].axisValue * 1000)).getFullYear()
                    var m = new Date(parseInt(v[0].axisValue * 1000)).getMonth() + 1 > 9 ? new Date(parseInt(v[0].axisValue * 1000)).getMonth() + 1 : '0' + (new Date(parseInt(v[0].axisValue * 1000)).getMonth() + 1)
                    var d = new Date(parseInt(v[0].axisValue * 1000)).getDate() > 9 ? new Date(parseInt(v[0].axisValue * 1000)).getDate() : '0' + new Date(parseInt(v[0].axisValue * 1000)).getDate()
                    var h = new Date(parseInt(v[0].axisValue * 1000)).getHours() > 9 ? new Date(parseInt(v[0].axisValue * 1000)).getHours() : '0' + new Date(parseInt(v[0].axisValue * 1000)).getHours()
                    var mm = new Date(parseInt(v[0].axisValue * 1000)).getMinutes() > 9 ? new Date(parseInt(v[0].axisValue * 1000)).getMinutes() : '0' + new Date(parseInt(v[0].axisValue * 1000)).getMinutes()
                    var dStr = y + '-' + m + '-' + d + ' ' + h + ':' + mm
                    var inner = '<div style="padding: 25px 20px; border: 1px solid #FCEA00; background-color: rgba(0, 0, 0, 0.7);">' + dStr + '<br/>' + str + '</div>'
                    var out = '<div style="background: linear-gradient(to left, #FCEA00, #FCEA00) left top no-repeat, linear-gradient(to bottom, #FCEA00, #FCEA00) left top no-repeat, linear-gradient(to left, #FCEA00, #FCEA00) right top no-repeat, linear-gradient(to bottom, #FCEA00, #FCEA00) right top no-repeat, linear-gradient(to left, #FCEA00, #FCEA00) left bottom no-repeat, linear-gradient(to bottom, #FCEA00, #FCEA00) left bottom no-repeat, linear-gradient(to left, #FCEA00, #FCEA00) right bottom no-repeat, linear-gradient(to left, #FCEA00, #FCEA00) right bottom no-repeat;background-size: 1px 21px, 21px 1px, 1px 21px, 21px 1px;padding: 10px;">' + inner + '</div>'
                    return out
                  }
                },
    
    1. 首先,将tooltip的backgroundColor设为null ,不设border,假装没有任何的背景和框框
    2. 里面的数据先找到合适的排列,再加个div 设个border
    3. 最后外面再加个div 写四个角的border

    结果:
    在这里插入图片描述

    展开全文
  • 肯定各位在使用tooltip的时候,会遇到tooltip过长的问题 解决方案如下: 根据方法文档,给tooltip添加一个自定义的class名 <el-tooltip class="item" effect="dark" content="Bottom" placement="...

    解决方法

    肯定各位在使用tooltip的时候,会遇到tooltip过长的问题
    在这里插入图片描述
    解决方案如下:
    根据方法文档,给tooltip添加一个自定义的class名

        <el-tooltip class="item"
                    effect="dark"
                    content="Bottom"
                    placement="bottom-end"
                    popper-class='my-tooltip'>
          <div slot="content">{{msg}}</div>
          <el-button></el-button>
        </el-tooltip>
    
    	<style lang='scss' scope>
    	.my-tooltip {
    	  width: 33%;
    	}
    	</style>
    

    或者

    <style lang='scss' scope>
    .el-tooltip__popper {
      width: 33%;
    }
    </style>
    

    效果如下所示
    在这里插入图片描述


    坑点(原因)

    最开始的时候,我使用的是以下css进行修改

    <style lang='scss' scope>
    .content {
      display: flex;
    
      .el-tooltip__popper {
        width: 33%;
      }
    }
    </style>
    

    但是没有生效,我反复确认,我的class没有写错,认真审查dom才发现
    tooltip的dom并不是如我们所想,在页面内,而是在另一个div中。

    所以使用后代选择器没有效果。
    在这里插入图片描述

    展开全文
  • 这个tooltip默认是全屏宽度,如果希望设置宽度,单独写一个style样式即可: .tech-popper.el-tooltip__popper.is-dark { line-height: 14px; max-width: 25rem; }

    这个tooltip默认是全屏宽度,如果希望设置宽度,单独写一个style样式即可:

    .el-tooltip__popper, .el-tooltip__popper.is-dark {
        line-height: 14px;
        max-width: 25rem;
        color: #fff !important;
    }
    
    展开全文
  • 今天是2021年的第201天,更一篇吧。否则2021年的博客就真的寸草不生了。 文章目录 ... 1.... 2....最近使用到el-tooltip组件和el-popper组件,但是自定义背景色时痛苦难受。...一、el-tooltip组件 ...二、自定义样式 .

    今天是2021年的第201天,更一篇吧。否则2021年的博客就真的寸草不生了。


    前言

    最近使用到el-tooltip组件和el-popper组件,但是自定义背景色时痛苦难受。毕竟与el-select还是有些不同。

    因此,特来记录。


    一、el-tooltip组件

    该组件常用于展示鼠标 hover 时的提示信息。基本使用方式见 element ui官网

    二、自定义样式

    1.默认悬浮显示样式

    • 文字提示的默认样式:

    • 默认样式对应的代码:
    <template>
      <div id="app">
        <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
        <div style="background-color: black; height: 200px">
          <el-tooltip
            class="item"
            effect="light"
            content="Bottom Left 提示文字"
            placement="bottom-start"
            :manual="manual"
          >
            <el-button type="success">成功按钮</el-button>
          </el-tooltip>
        </div>
      </div>
    </template>

    2.自定义样式

    • 背景色设置黄色 && 箭头设置绿色:
    •  代码示例
    <template>
      <div id="app">
        <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
        <div style="background-color: black; height: 200px">
          <el-tooltip
            class="item"
            effect="light"
            content="Bottom Left 提示文字"
            placement="bottom"
            popper-class="tip-class"
          >
            <el-button type="success">成功按钮</el-button>
          </el-tooltip>
        </div>
        
      </div>
    </template>
    <script>
    
    
    <style>
    
    div.tip-class {
      padding: 1.5rem !important;
      max-width: 30% !important;
      background-color: #f5560c !important;/*设置矩形框的背景颜色*/
    }
    /* [x-placement^='A'] A指的是el-tooltip标签中的placement的值,此处是bottom。猜测用于动态设置border-A-color。*/
    .el-tooltip__popper[x-placement^='bottom'].tip-class .popper__arrow::after {
      border-bottom-color: #05e205 !important;/*设置指向箭头的颜色*/
    }
    
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    

    该处使用的url网络请求的数据。


    说明

    此处需要说明,在style中没有使用scoped属性,存在可能污染全局css的风险。因此,在设置css样式时,使用了.tip-class 进行标签过滤。

    OK。

    bye~

    下次随缘~
     

    展开全文
  • echarts 全国地图下钻 以及tooltip样式修改 这个项目涉及到地图下潜 以及tooltip样式修改 以及部分饼状图折线图 希望打个笔记吧 做得也不容易 废话不多说 上代码 需要引入jq echarts 以及各个省份的json文件 效果图...
  • 这是一款Bootstrap tooltip工具提示修改主题样式插件。通过该插件,可以修改bootstrap3和bootstrap4的内置tooltip主题样式,生成各种颜色的漂亮的tooltip工具提示。
  • a-tooltip overlayClassName="nameTooltipClass"> <template slot="title"> {{ item.name }} </template> <span class="setting-customNav-customNavItem-content-left-name" :
  • elementUI tooltip修改样式不管用解决 是vue使用scoped后会在当前组件下每个dom元素上添加一个组件唯一标识(例如data-v-fae5bece),class也会编译成data-v-fae5bece,而我们使用popper-class自定义class想写在...
  • WPF修改Tooltip样式

    2011-01-11 09:17:20
    这是一个在WPF中修改任何控件的Tooltip样式的源代码,供大家参考获得自己想要的功能
  • el-tooltip 如何修改样式

    千次阅读 2020-10-22 14:00:40
    el-tooltip 如何修改样式 el-tooltip标签又popper-class="atooltip"属性可以给组件建一个选择器名。通过atooltip可以直接修改el-tooltip. <el-tooltip placement="bottom" popper-class="atooltip"> <...
  • antd tooltip 修改样式

    千次阅读 2020-12-17 16:25:58
  • element-ui 修改el-tooltip样式

    千次阅读 2021-05-25 17:54:59
    所以在当前页面内直接通过修改这个类el-tooltip__popper的样式样式未生效 解决办法 需要注意的就是,该代码片段,需要写在根文件的style里,如果写在当前文件里也并非不可,但是需要将scope取消掉,原因在...
  • echarts中的tooltip是提示框组件,正常展示如下:
  • Element-ui文字提示el-Tooltip修改样式

    万次阅读 2019-12-09 15:04:38
    Element-ui文字提示el-Tooltip修改样式 需求: vue-cli项目文字提示:需要改变字体样式和宽度。
  • 在实际的项目中,我们在使用echart的时候,默认样式往往不能达到我们的目的,我们就需要在原来的插件上做修改。接下来介绍一下我使用到的一些关于tooltip部分的修改。 1: tooltip的弹窗部分默认样式为黑色透明底色,...
  • WPF自定义tooltip样式

    2019-12-26 14:14:47
    tooltip其实和popup很像,但是popup弹出后需要监听鼠标点击...tooltip因为可以接受类对象,所以可以传任意内容给样式模板 代码: <!-- =============== 提示文本样式 =============== --> <Style x:Key...
  • bootstrap的tooltip修改样式

    千次阅读 2017-05-21 16:00:53
    bootstrap的tooltip修改样式1.找到tooltip-innder类,提高权重,可以覆盖之前的样式:示例代码.mytooltip .tooltip-inner{ padding:10px; line-height: 30px; text-align: left; background-color: rgba(0,0,0,...
  • <el-table-column v-for="(item, index) in tableLabel" prop="item" :key="index" label="数值"> <template slot-scope="scope">...el-tooltip placement="right"> <span>{{scope.row.va.
  • echarts tooltip样式设置

    千次阅读 2020-09-03 10:17:11
    tooltip:{ trigger:"axis", axisPointer:{ type:"shadow",//背景色 shadowStyle:{ color:"rgba(0,246,255,0.1)"//背景色设置 ...
  • 关于UI框架,用起来虽然很方便,但是样式却和所需的不一样,那么该如何修改成自己想要的样式呢? 在粘一张我自己修改后的样式图 不仅修改了button的背景色、文字颜色,更修改了上方提示气泡的背景色 官方api里没有...
  • elementUI修改tooltip、popover等样式

    千次阅读 2020-09-21 17:21:16
    转载:https://www.cnblogs.com/goloving/p/9195412.html 像elementUI的tooltip、popover这种渲染出来的元素都是在body下面一层,所以你在组件里面去加样式发现根本不生效,所以需要到App.vue里面去加
  • a-tooltip placement="top" overlayClassName="bgc_tooltip"> <!-- --> <template slot="title"> <span>prompt text</span> </template> <a-button>Top</a-button>...
  • element Tooltip背景颜色样式修改

    万次阅读 2018-11-27 17:49:48
    el-tooltip content="Top center" placement="top-start" popper-class="atooltip"&gt; &lt;el-button&gt;Dark&lt;/el-button&gt; &lt;/el-tooltip&gt...
  • 主要介绍了element-ui tooltip修改背景颜色和箭头颜色的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 就是在table 中 的 columns 使用定位 render 语法中 使用了 tooltip 组件,会出现样式覆盖的问题。 加上 上述这个属性 设为true 会解决这个问题 设为true 之后 会置于body 内,更难受的问题来了,跳转页面之后 ...
  • WPF之自定义ToolTip样式和模板

    千次阅读 2018-07-20 16:35:42
     <ControlTemplate x:Key="DefaultToolTipTemplate" TargetType="ToolTip">  ,5,5,5">        <Style x:Key="DefaultToolTipStyle" TargetType="{x:Type ToolTip}">               ...
  • 修改Qt的tooltip主要是两种方式 修改样式表,或者通过 html 语法控制样式 方式一、修改样式修改样式表可以在Qt Designer里进行编辑 也可以在代码中进行设置 通过样式表方式设置,使用时需要传入 ...
  • 对背景色进行修改使用color属性 修改字体需要将title内容取出来自定义这里我定一个titles(随便定的演示用) 最终效果
  • /* 更改提示框样式 */ body .el-tooltip__popper.is-light { color: #666666; border-color: #cccccc; padding: 5px 10px; } /* 更改箭头颜色 */ /* 箭头边框 */ body .el-tooltip__popper[x-placement^=right] ....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,721
精华内容 3,488
关键字:

tooltip样式修改

友情链接: lab33-motor-step.rar