[Vuejs]-Mouseover or hover event in element UI tabs using in Vue js

by

3👍

I don’t know specifics about Element UI, but in general:

For an ordinary browser tooltip, you can use the title attribute:

<el-tab-pane title="Tooltip">

Otherwise you can register an event listener for the mouseover event like this:

<el-tab-pane @mouseover.native="...">
👤Decade Moon

0👍

I made a fiddle that does what I think you’re trying to achieve: https://jsfiddle.net/azfpL7on/1/

You can add an eventlistener with v-on:mouseover to add an element or class to display the tooltip but I think it would be better to let css handle the hover and tooltip like my example. I did use vue data and v-for however.

How this would look in your code snippet:

<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
   <el-tab-pane
      v-for="(item, index) in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
      >
          {{item.content}}
          <span class="tooltiptext">{{ item.tooltip }}</span> <!-- New! -->
   </el-tab-pane>
</el-tabs>
👤Wouter Vandevelde

0👍

Tabs provide scoped slot label, Just put el-tooltip in the slot. 

var Main = {
    data() {
      return {
        editableTabsValue2: '2',
        editableTabs2: [{
          title: 'Tab 1',
          name: '1',
          content: 'Tab 1 content'
        }, {
          title: 'Tab 2',
          name: '2',
          content: 'Tab 2 content'
        }],
        tabIndex: 2
      }
    },
    methods: {
      addTab(targetName) {
        let newTabName = ++this.tabIndex + '';
        this.editableTabs2.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        });
        this.editableTabsValue2 = newTabName;
      },
      removeTab(targetName) {
        let tabs = this.editableTabs2;
        let activeName = this.editableTabsValue2;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        
        this.editableTabsValue2 = activeName;
        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@2.0.11/lib/theme-chalk/index.css");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.0.11/lib/index.js"></script>
<div id="app">
<div style="margin-bottom: 20px;">
  <el-button size="small" @click="addTab(editableTabsValue2)">
    add tab
  </el-button>
</div>
<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
  <el-tab-pane v-for="(item, index) in editableTabs2" :key="item.name" :label="item.title" :name="item.name">
    <el-tooltip slot="label" :content="item.title"><span>{{item.title}}</span></el-tooltip>
    {{item.content}}
  </el-tab-pane>
</el-tabs>
</div>

A demo here: jsFiddle

👤Sanjaysinh Zala

Leave a comment