第一種:
<Tooltip placement="bottom">
<Button>Multiple lines</Button>
<div slot="content" style="white-space: normal;">
A balloon appears when the mouse passes over this text
</div>
</Tooltip>
第二種:
render: (h, params) => {
let texts = ''; //表格列顯示文字
if (params.row.content !== null) {
if (params.row.content.length > 6) { //進行截取列顯示字數
texts = params.row.content.substring(0, 6) + ".....";
} else {
texts = params.row.content;
}
}
return h('div', [
h('Tooltip', {
props: {
placement: 'bottom',
// transfer: true //是否將彈層放置於 body 內
},
style: {
cursor: 'pointer',
}
}, [ //這個中括號表示是Tooltip標簽的子標簽
texts, //表格列顯示文字
h('div', {
slot: 'content',
style: {
whiteSpace: 'normal'
}
}, params.row.content //整個的信息即氣泡內文字
)
])
]);
}
顯示結果如下:

