el-tooltip 刷新后才能显示

可能是因为 el-tooltip 是基于Vue.js实现的组件，需要在Vue.js的生命周期钩子中进行初始化。如果您是动态添加 el-tooltip，可能需要手动调用其 $nextTick 方法来确保其正确初始化。您可以在 Vue.js 的 mounted 生命周期钩子中调用 $nextTick 方法。具体代码如下：

mounted() {
  this.$nextTick(() => {
    // 初始化 el-tooltip
  })
}

另外，如果您是使用 el-tooltip 内嵌在 el-table 的单元格中，可能需要在 el-table 的 $nextTick 回调中初始化 el-tooltip。具体代码如下：

mounted() {
  this.$nextTick(() => {
    this.$refs.table.$nextTick(() => {
      // 初始化 el-tooltip
    })
  })
}

相关问题

el-tooltip无法显示的问题

鉴于引用和引用的内容，您遇到的问题是，当页面手动刷新后，<el-tooltip>组件无法显示tooltip，即无法展示鼠标悬停的提示信息。您尝试过在<el-tooltip>标签外面添加<el-tooltip>标签，并使用自定义的超链接组件实现了鼠标悬停展示tooltip的效果，但只要页面手动刷新，该tooltip就无法显示了。您还尝试了在<el-tooltip>组件上添加一个:key属性，并在js中使用$set()方法进行重新渲染，但页面刷新时仍然会出现没有展示tooltip的问题。

针对您的问题，可以考虑以下解决办法：
1. 确保在页面刷新后，组件的数据状态能够正确地被保留，以便正确地展示tooltip。您可以检查页面刷新时是否有相关的数据重置或重新加载的逻辑。
2. 确保在页面刷新后，<el-tooltip>组件能够正确地被重新渲染。您可以检查组件的生命周期钩子函数，例如created()或mounted()，确保在组件初始渲染后，触发重新渲染的逻辑。
3. 如果仍然无法解决问题，您可以尝试使用Vue.js的动态组件来动态加载<el-tooltip>组件，以确保每次页面刷新时都能正确地加载和显示tooltip组件。

希望以上解决办法能够帮助您解决<el-tooltip>无法显示的问题。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *2* [el-tooltip无法显示的问题](https://blog.csdn.net/weixin_43882265/article/details/125995006)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
- *3* [element UI中使用tooltip组件，当里边的按钮设置disabled后，tooltip不显示问题的解决方法](https://blog.csdn.net/cxwy_ing/article/details/122456704)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]

el-tooltip 样式修改

`el-tooltip` 是 Element UI 中的一个轻量级提示组件，它通常用于提供元素的额外信息，当鼠标悬停在元素上时会显示 tooltip 内容。如果你想要修改它的样式，可以按照以下步骤操作：

1. **CSS选择器**：首先你需要找到`el-tooltip`的默认CSS类名，比如`el-tooltip__popper`、`el-tooltip__arrow`等。这些类名通常包含在Element UI的CSS库中。

2. **覆盖默认样式**：在你的项目样式表（如`.vue`文件的`<style>`部分或外部CSS文件）中，你可以使用`:deep()`伪元素来精确匹配并覆盖Element UI的样式。例如：

   :deep(.el-tooltip__popper) {
     background-color: #f00; /* 修改背景颜色 */
     border: 1px solid #ccc; /* 修改边框 */
   }
   
   :deep(.el-tooltip__arrow) {
     border-top-color: transparent !important;
     border-left-color: inherit; /* 或者修改箭头的颜色 */
   }

3. **自定义主题**：如果你使用的是Element Plus等基于Vue CLI的框架，你还可以通过主题系统来自定义组件的颜色和样式，只需在theme.js中对应地修改`tooltip`相关的配置。

记得在应用了自定义样式后，可能需要刷新浏览器或者在devtools的Styles面板中清除缓存才能看到效果。