Bootstrap-vue Tooltip issue with Table Responsive

by Julien Vernet

HTML

<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<div id="app">
  <div>
    <b-table striped hover :items="items" :fields="fields" responsive>  
            <template slot="test" slot-scope="row">            
              <b-button size="sm" v-b-tooltip.hover title="Tooltip content">Hover Me</b-button>
            </template>
    </b-table>
  </div>
</div>

CSS

body { padding: 1rem; }

JavaScript

window.onload = () => {
  new Vue({
    el: '#app',
      data() {
        return {
          fields: ['first_name', 'last_name', 'age', 'test'],
          items: [
            { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' }
          ]
        }
      }
    })
}