Element-ui文字提示el-Tooltip修改樣式

Element-ui文字提示el-Tooltip修改樣式

需求： vue-cli項目文字提示：需要改變字體樣式和寬度。

<el-tooltip
	:content= 'node.label'
	placement="top-start"
	effect="light"
	popper-class="atooltip"
	>
	   <span>{{ node.label }}</span>
</el-tooltip>

el-tooltip中content屬性是決定hover時提示的信息的內容；placement屬性來決定展示的效果；effect爲element提供的主題，有‘dark/light’兩種，我這裏選擇的是背景是白色的，popper-class是自己設置的class名字，方便下面修改樣式。更多詳細的參數可以上elemenet官網上的文檔。
根據DOM樹尋找得知，我們設置的class–atooltip是與div中app同級的，他的父元素是body:

由此我們設置：

.el-popup-parent--hidden > .atooltip{
  	background: #FFFFFF;
    font-size:	12px；
    max-width:	400px;
}

如果不生效，請把頁面的style中scoped去掉，我們在上面設置popper-class並在下面css樣式直接指向這個class也是爲了避免影響其他的tooltip樣式。