elementUI中改变el-tooltip箭头颜色或者隐藏

在Element UI中，可以通过以下方法来改变el-tooltip的箭头颜色或者隐藏箭头：

1. 改变箭头颜色：

   使用CSS选择器来覆盖Element UI的默认样式。

/* 改变箭头颜色 */
.el-tooltip__popper .popper__arrow {
  border-color: red; /* 这里设置你想要的颜色 */
}

2. 隐藏箭头：

   同样使用CSS来隐藏箭头。

/* 隐藏箭头 */
.el-tooltip__popper .popper__arrow {
  display: none;
}

在Vue组件中，你可以通过添加style标签或者在你的全局样式文件中添加上述CSS代码。如果你想要在组件内部动态改变这些样式，可以使用内联样式或者CSS类绑定。

例如，使用内联样式改变箭头颜色：

<template>
  <el-tooltip
    content="这是一段内容"
    placement="top"
    :open-delay="500"
    :popper-options="{ boundariesElement: 'body' }"
    :popper-class="popperClass"
  >
    <div>悬停显示</div>
  </el-tooltip>
</template>
 
<script>
export default {
  data() {
    return {
      popperClass: 'custom-popper'
    };
  }
};
</script>
 
<style>
/* 改变箭头颜色 */
.custom-popper .popper__arrow {
  border-color: blue; /* 改变为蓝色 */
}
 
/* 隐藏箭头 */
/* .custom-popper .popper__arrow {
  display: none;
} */
</style>

在上面的例子中，我们通过绑定popper-class属性来动态改变箭头的颜色。如果你想隐藏箭头，只需要取消注释相应的CSS代码即可。