vue bootstrap tooltip
<div>
<b-container fluid>
<b-row class="text-center">
<b-col md="3" class="py-3">
<b-button v-b-tooltip.hover.top="'Tooltip!'" variant="primary">Top</b-button>
</b-col>
<b-col md="3" class="py-3">
<b-button v-b-tooltip.hover.right="'Tooltip!'" variant="primary">Right</b-button>
</b-col>
<b-col md="3" class="py-3">
<b-button v-b-tooltip.hover.left="'Tooltip!'" variant="primary">Left</b-button>
</b-col>
<b-col md="3" class="py-3">
<b-button v-b-tooltip.hover.bottom="'Tooltip!'" variant="primary">Bottom</b-button>
</b-col>
<b-col md="3" class="py-3">
<b-button v-b-tooltip.hover.topright="'Tooltip!'" variant="primary">Top right</b-button>
</b-col>
<b-col md="3" class="py-3">
<b-button v-b-tooltip.hover.topleft="'Tooltip!'" variant="primary">Top left</b-button>
</b-col>
<b-col md="3" class="py-3">
<b-button v-b-tooltip.hover.bottomright="'Tooltip!'" variant="primary">Bottom right</b-button>
</b-col>
<b-col md="3" class="py-3">
<b-button v-b-tooltip.hover.bottomleft="'Tooltip!'" variant="primary">Bottom left</b-button>
</b-col>
<b-col md="3" class="py-3">
<b-button v-b-tooltip.hover.lefttop="'Tooltip!'" variant="primary">Left top</b-button>
</b-col>
<b-col md="3" class="py-3">
<b-button v-b-tooltip.hover.leftbottom="'Tooltip!'" variant="primary">Left bottom</b-button>
</b-col>
<b-col md="3" class="py-3">
<b-button v-b-tooltip.hover.righttop="'Tooltip!'" variant="primary">Right top</b-button>
</b-col>
<b-col md="3" class="py-3">
<b-button v-b-tooltip.hover.rightbottom="'Tooltip!'" variant="primary">Right bottom</b-button>
</b-col>
</b-row>
</b-container>
</div>