前端踩坑（六）(vue) element-ui Tooltip 樣式修改

解決方法

肯定各位在使用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中。

所以使用後代選擇器沒有效果。