Element: How to combine tab components with Tooltip components for mouse movements Tab Tips

Created on 18 Jan 2018 · 5Comments · Source: ElemeFE/element

Element UI version

1.4.1

OS/Browsers version

Ubuntu 16.04 / Google Chrome Version 60.0.3112.90 (Official Build) (64-bit)

Vue version

2.5.13

Reproduction Link

https://jsfiddle.net/xngx7hh8/

Steps to reproduce

In given Reproduction link, when mouse hover on tab it change the text color and shows the clear icon.
Now you just need to add Tooltip option on mouse hover.
I want to use Tab component and Tooltip component together.
If client hover the tabpane label it shows the tooltip like, Sublime and Atom Editor do.

What is Expected?

I want to use Tab component and Tooltip component together.
If client hover the tabpane label it shows the tooltip like, Sublime and Atom Editor.

What is actually happening?

Right now I am not able to use Tooltip component in Tab component.

question

Source

dweep119

Most helpful comment

Tabs provide scoped slot label, Just put el-tooltip in the slot. A demo here: https://jsfiddle.net/xngx7hh8/2/

furybean on 19 Jan 2018

🎉2 👍2

All 5 comments

Hi, your JSFiddle page is blank because it seems you forgot to click the Save button. Please save your fiddle and then edit this issue with the new link.

element-bot on 18 Jan 2018

😕1

@element-bot .... _Fiddle_ seems to be working for me..
issue1

neogn95 on 18 Jan 2018

@dweep119 It seems that elements which are dynamically generated based on data cannot be nested within another component like <el-tooltip>. Looking for a solution myself

neogn95 on 18 Jan 2018

Tabs provide scoped slot label, Just put el-tooltip in the slot. A demo here: https://jsfiddle.net/xngx7hh8/2/

furybean on 19 Jan 2018

🎉2 👍2

Yeah It works for me.
Thanks @furybean.

dweep119 on 19 Jan 2018

Was this page helpful?

0 / 5 - 0 ratings