精华内容
下载资源
问答
  • WPF修改Tooltip样式

    2011-01-11 09:17:20
    这是一个在WPF中修改任何控件的Tooltip样式的源代码,供大家参考获得自己想要的功能
  • a-tooltip overlayClassName="nameTooltipClass"> <template slot="title"> {{ item.name }} </template> <span class="setting-customNav-customNavItem-content-left-name" :

    一、 利用overlayClassName给组件起类名

    <a-tooltip overlayClassName="nameTooltipClass">
              <template slot="title">
                {{ item.name }}
              </template>
              <span class="setting-customNav-customNavItem-content-left-name" :style="{color: item.display == 0 ? '#999999' : '#333333'}">{{item.name}}</span>
    </a-tooltip>
    

    二、然后根据类名重新写样式

    .nameTooltipClass {
        .ant-tooltip-inner {
            color: #FFFFFF;
            background-color: #333333;
            opacity: 1;
        }
        
    }
    

    **注意:**这里的样式等级跟父元素同等级

    展开全文
  • 所以在当前页面内直接通过修改这个类el-tooltip__popper的样式样式未生效 解决办法 需要注意的就是,该代码片段,需要写在根文件的style里,如果写在当前文件里也并非不可,但是需要将scope取消掉,原因在...

    通过截图可以发现,tooletip所在的div,并不在当前页面的div内,而是在另外一个独立的div内

    所以在当前页面内直接通过修改这个类el-tooltip__popper的样式,样式未生效

     

    解决办法

    需要注意的就是,该代码片段,需要写在根文件的style里,如果写在当前文件里也并非不可,但是需要将scope取消掉,原因在上方已阐述过一次。
    该组件的层级不在于你使用的地方,它与跟文件属于统一层级

    .my-tooltip {
        padding: 2px 3px;
        border-radius: 3px;
        font-size: 10px;
        line-height: 1.6;
        .is-light{
            border: 1px solid #ebeef5;
        }
    }

    另外,因为是鼠标悬浮,才能显示出样式,比较不容易控制,可以参见element-ui 的Popover 弹出框样式

    展开全文
  • 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"> <...

    el-tooltip 如何修改样式
    el-tooltip标签又popper-class="testtooltip"属性可以给组件建一个选择器名。通过atooltip可以直接修改el-tooltip.

    <el-tooltip  
    placement="bottom" 
    popper-class="testtooltip">
      	<div slot="content">
      	    ceshi  
      	 </div>
    	<el-button>Dark</el-button>
    </el-tooltip>

    不过要注意,写的样式不能写在scoped样式标签里。需要重新写一个样式标签单独放。

    <style lang="less">
     箭头
    .el-tooltip__popper[x-placement^="bottom"] .popper__arrow {   
    	border-bottom-color: white!important;
    }
    箭头
    .el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {  
    	border-bottom-color: white !important;
    }
    内容
    .testtooltip{  
    	background: white !important;  
    	box-shadow: 1px 1px 10px 3px #D3D3D6;
    }
    </style>
    

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

    展开全文
  • 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="...
  • elementUI tooltip修改样式不管用解决 是vue使用scoped后会在当前组件下每个dom元素上添加一个组件唯一标识(例如data-v-fae5bece),class也会编译成data-v-fae5bece,而我们使用popper-class自定义class想写在...
  • 样式文件中,找到类名为 jubu_tooltip 进行编辑,以下方小箭头为例:我修改了尺寸的大小以及背景色 修改样式的变化前后 修改前: 修改后: 如有错误请联系我,会及时修改,biubiubiu~ ...
  • antd tooltip 修改样式

    千次阅读 2020-12-17 16:25:58
  • echarts中的tooltip是提示框组件,正常展示如下:
  • /* 更改提示框样式 */ body .el-tooltip__popper.is-light { color: #666666; border-color: #cccccc; padding: 5px 10px; } /* 更改箭头颜色 */ /* 箭头边框 */ body .el-tooltip__popper[x-placement^=right] ....
  • 这是一款Bootstrap tooltip工具提示修改主题样式插件。通过该插件,可以修改bootstrap3和bootstrap4的内置tooltip主题样式,生成各种颜色的漂亮的tooltip工具提示。
  • WPF自定义tooltip样式

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

    千次阅读 2020-02-24 18:06:09
    leaflet自带tooltip相关api,支持传入自定义内容,但容器不支持自定义样式,通过leaflet源码_initLayout函数可以找到生成的tooltip的class名leaflet-tooltip等,然后就可以通过修改对应样式自己自定义样式了 ...
  • 在实际的项目中,我们在使用echart的时候,默认样式往往不能达到我们的目的,我们就需要在原来的插件上做修改。接下来介绍一下我使用到的一些关于tooltip部分的修改。 1: tooltip的弹窗部分默认样式为黑色透明底色,...
  • 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,...
  • echarts tooltip样式设置

    千次阅读 2020-09-03 10:17:11
    tooltip:{ trigger:"axis", axisPointer:{ type:"shadow",//背景色 shadowStyle:{ color:"rgba(0,246,255,0.1)"//背景色设置 ...
  • ToolTip样式 重写

    2011-08-12 11:56:35
    css请放到 styles目录里面,再在要使用样式的页面的最后加入这样一段代码: <script type="text/javascript" src="scripts/ToolTip.js"> <script type="text/javascript">initToolTip();</script>
  • 主要介绍了element-ui tooltip修改背景颜色和箭头颜色的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 就是在table 中 的 columns 使用定位 render 语法中 使用了 tooltip 组件,会出现样式覆盖的问题。 加上 上述这个属性 设为true 会解决这个问题 设为true 之后 会置于body 内,更难受的问题来了,跳转页面之后 ...
  • 修改Qt的tooltip主要是两种方式 修改样式表,或者通过 html 语法控制样式 方式一、修改样式修改样式表可以在Qt Designer里进行编辑 也可以在代码中进行设置 通过样式表方式设置,使用时需要传入 ...
  • Element-ui文字提示el-Tooltip修改样式

    万次阅读 2019-12-09 15:04:38
    Element-ui文字提示el-Tooltip修改样式 需求: vue-cli项目文字提示:需要改变字体样式和宽度。
  • 以下代码直接可用,tootip的样式可以自己调试。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ ma...
  • 这个tooltip默认是全屏宽度,如果希望设置宽度,单独写一个style样式即可: .tech-popper.el-tooltip__popper.is-dark { line-height: 14px; max-width: 25rem; }
  • echart 图表tooltip样式自定义

    万次阅读 2018-04-12 21:30:29
    效果图: 样式要求如下:主要有2个难点,1.谷歌浏览器默认显示最小字号是12px的,除非在设置里面调节调整最小字号,可以显示到6px,但是不可能让用户去修改浏览器设置,所以这边使用 transform这个属性来进行缩放,缩放会有...
  • 今天是2021年的第201天,更一篇吧。否则2021年的博客就真的寸草不生了。 文章目录 ... 1.... 2....最近使用到el-tooltip组件和el-popper组件,但是自定义背景色时痛苦难受。...一、el-tooltip组件 ...二、自定义样式 .
  • echarts 全国地图下钻 以及tooltip样式修改 这个项目涉及到地图下潜 以及tooltip样式修改 以及部分饼状图折线图 希望打个笔记吧 做得也不容易 废话不多说 上代码 需要引入jq echarts 以及各个省份的json文件 效果图...
  • 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}">               ...
  • 需求:修改 table 中 tooltip样式及位置。 尝试:但是表格中 tooltip 默认是挂载到body中的,修改当前表格 tooltip 样式,全局都会受影响,
  • Bootstrap Tooltip修改样式和显示换行

    万次阅读 2018-06-27 17:00:57
    在项目中,使用到了bootstrap中的tooltip,但是我不需要使用它的样式,并且文本显示的内容是需要换行的。代码如下:&lt;link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,352
精华内容 3,740
关键字:

更改tooltip样式