element-ui 修改tooltip样式

1.表格tooltip 统一修改

.el-tooltip__popper.is-light {
  background: #FFF;
  box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.16);
  border-radius: 4px;
  opacity: 1;
  border: none;

  &[x-placement^=top] .popper__arrow:after {
    border-top-color: #fff;
  }

  &[x-placement^=top] .popper__arrow {
    border-top-color: rgba(0,0,0,0.16);
  }

}

element-ui 修改tooltip样式_第1张图片

2.表格加tooltip-effect


        

 
.is-mytooltip {
  background: #fff;
  color: #3759af;
  border: 1px solid rgb(158, 157, 157);
  font-size: 15px;
}

3. 文字提示


      {{ text }}
    




.my-pop.el-tooltip__popper.is-light{
  background: #FFF;
  //box-shadow: $boxShadow;
  filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.16));
  border-radius: 4px;
  opacity: 1;
  border: none;

  max-width: 560px;
  position: relative;

 //三角形颜色修改
  &[x-placement^=bottom] .popper__arrow:after{
    border-bottom-color: #fff;
  }
  &[x-placement^=bottom] .popper__arrow{
    border-bottom-color: rgba(0,0,0,0.16);
  }

}

element-ui 修改tooltip样式_第2张图片

你可能感兴趣的:(javascript,开发语言,ecmascript,vue.js)