<!-- Tabs navs -->

<ul class="nav nav-tabs mb-3 tab-hover" id="ex1" role="tablist">

  <li class="nav-item" role="presentation">

    <a

      data-mdb-tab-init

      class="nav-link active"

      id="ex1-tab-1"

      href="#ex1-tabs-1"

      role="tab"

      aria-controls="ex1-tabs-1"

      aria-selected="true"

      >Tab 1</a

    >

  </li>

  <li class="nav-item" role="presentation">

    <a

      data-mdb-tab-init

      class="nav-link"

      id="ex1-tab-2"

      href="#ex1-tabs-2"

      role="tab"

      aria-controls="ex1-tabs-2"

      aria-selected="false"

      >Tab 2</a

    >

  </li>

  <li class="nav-item" role="presentation">

    <a

      data-mdb-tab-init

      class="nav-link"

      id="ex1-tab-3"

      href="#ex1-tabs-3"

      role="tab"

      aria-controls="ex1-tabs-3"

      aria-selected="false"

      >Tab 3</a

    >

  </li>

</ul>

<!-- Tabs navs -->

​

<!-- Tabs content -->

<div class="tab-content" id="ex1-content">

  <div

    class="tab-pane fade show active"

    id="ex1-tabs-1"

    role="tabpanel"

    aria-labelledby="ex1-tab-1"

  >

    Tab 1 content

  </div>

  <div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">

    Tab 2 content

  </div>

  <div class="tab-pane fade" id="ex1-tabs-3" role="tabpanel" aria-labelledby="ex1-tab-3">

    Tab 3 content

  </div>

</div>

<!-- Tabs content -->

​

const triggerTabList = [].slice.call(document.querySelectorAll('.tab-hover a'));

triggerTabList.forEach((triggerEl) => {

  const tabTrigger = new Tab(triggerEl);

​

  triggerEl.addEventListener('mouseover', (event) => {

    event.preventDefault();

    tabTrigger.show();

    tabTrigger.classList.add('test');

  });

});