bootstrap-vue : how to recognize hover event over b-tab

Question

I'm trying to change the active tab of a bootstrap-vue b-tabs when the tab title is hovered over, not only when clicked on. I'm having trouble isolating this event.

In the following Codepen example, I can isolate the event when the image is being hovered over, however I want to isolate the event when the title ('Tubes and Vials' for example) is being hovered over.

I'm fairly new to Vue so I apologize if this is a simple answer, but I haven't struggled with this for a while now and haven't been able to figure this out. Thanks!

Component File

<template>
    <b-container class="px-3" fluid>
        <div>
            <h3>Range Of Glass Products We Inspect</h3>
            <p>Anything formed from tubular glass</p>
        </div>
        <div>
            <b-tabs content-class="mt-3" align="left" class="vial-types" vertical>
                <b-tab
                        v-for="glassItem in productRange"
                        v-bind:key="glassItem.type"
                        v-bind:ref="glassItem"
                        v-bind:title="glassItem.type"
                        @mouseover.native="greet()"
                        @mouseleave.native="greet()"
                >
                    <b-img
                            v-bind:src="glassItem.image"
                            alt="Factory Image">
                    </b-img>
                </b-tab>
            </b-tabs>
        </div>
    </b-container>
</template>

<script>
    export default {
        name: "ProductRange",
        data() {
            return {
                productRange: [
                    {type: "Screw & Flanged Head", image:"https://picsum.photos/600/400/", hover: false},
                    {type: "Tubes and Vials", image:"https://picsum.photos/600/400/", hover: false},
                    {type: "Pipettes, Syringes, Filling Needles", image:"https://picsum.photos/400/400/",hover: false},
                    {type: "Ampoules", image:"https://picsum.photos/600/400/", hover: false},
                    {type: "Custom Geometries Per Customer Specification", image:"https://picsum.photos/600/400/", hover: false}
                ]
            }
        },
        methods: {
            greet: function () {
                console.log("Hovering");
            }
        }
    }
</script>

<style lang="sass">

</style>

Answer 1

You could also use the b-tab's title slot, and then add a hover/unhover listener in there:

<b-tabs content-class="mt-3" align="left" class="vial-types" vertical>
  <b-tab
    v-for="glassItem in productRange"
    v-bind:key="glassItem.type"
    v-bind:ref="glassItem"
  >
    <template v-slot:title>
      <div
        @mouseover="hovered"
        @mouseleave="unHovered"
      >
        {{ glassItem.type }}
      </div>
    </template>
    <b-img
      v-bind:src="glassItem.image"
      alt="Factory Image">
    </b-img>
  </b-tab>
</b-tabs>

Answer 2

Sadly I don't think there's a built-in way to easily do this.

However, you can still solve this by hiding the standard tabs and instead reconstruct the structure yourself using b-nav and binding to the b-tabs v-model.

You can then add your events the b-nav-item as they'll be working as your tabs.

new Vue({
  el: "#app",
  data: {
    selectedTab: 0,
    productRange: [
      { 
        type: "Screw & Flanged Head", 
        image: "https://picsum.photos/600/400/" 
      },
      { 
       type: "Tubes and Vials", 
       mage: "https://picsum.photos/640/400/" 
      },
      {
        type: "Pipettes, Syringes, Filling Needles",
        image: "https://picsum.photos/400/400/"
      },
      { 
        type: "Ampoules", 
        image: "https://picsum.photos/600/400/" 
      },
      {
        type: "Custom Geometries Per Customer Specification",
        image: "https://picsum.photos/700/400/"
      }
    ]
  },
  methods: {
    greet: function() {
      console.log("hovering");
    },
    onTabHover(glassItem) {
      console.log("Tab hovered", glassItem)
    }
  }
});

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>

<b-container id="app" class="px-3"fluid>
  <div>
    <h3>Range Of Glass Products We Inspect</h3>
    <p>Anything formed from tubular glass</p>
  </div>
  <div>
    <b-row>
      <b-col cols="auto">
        <b-nav pills vertical>
          <b-nav-item v-for="(glassItem, index) in productRange" 
                      :active="selectedTab === index"
                      @click="selectedTab = index"
                      @mouseenter="onTabHover(glassItem)">
            {{ glassItem.type }}
          </b-nav-item>
        </b-nav>
      </b-col>
      <b-col>
        <b-tabs v-model="selectedTab" 
                content-class="mt-3" 
                class="vial-types" 
                nav-class="d-none">
         <b-tab
                v-for="glassItem in productRange"
                :key="glassItem.type"
                :ref="glassItem"
                :title="glassItem.type"
                @mouseover.native="greet()"
                @mouseleave.native="greet()"
                >
            <b-img
                   :src="glassItem.image"
                   alt="Factory Image">
            </b-img>
          </b-tab>
        </b-tabs>
      </b-col>
    </b-row>
  </div>
</b-container>