sample.vue

<template>
  <div class="hello">
    <div class="test" v-b-tooltip.hover title="Tooltip on 1"></div>
    <div class="test" v-b-tooltip.hover title="Tooltip on 2"></div>
    <div class="test" v-b-tooltip.hover title="Tooltip on 3"></div>
    <div class="test" v-b-tooltip.hover title="Tooltip on 4"></div>
    <div class="test" v-b-tooltip.hover title="Tooltip on 5"></div>
    <div class="test" v-b-tooltip.hover title="Tooltip on 6"></div>
    <div class="test" v-b-tooltip.hover title="Tooltip on 7"></div>
    <div class="test" v-b-tooltip.hover title="Tooltip on 8"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  margin: 100px;
}
.test {
  display: inline-block;
  background: darkgreen;
  width: 30px;
  height: 30px;
  margin: 5px;
}
</style>