A Bootstrap tooltip plugin is a small pop-up element that appears
while the user moves the mouse pointer over an element.
Keep reading these examples for adding custom tooltips with CSS and
JavaScript using CSS3 for animations and data-attributes for local
title storage.
Example
Primary
Info
Success
Warning
Danger
Default
Secondary
<base-button size= "sm" type= "primary" class= "btn-tooltip"
v-b-tooltip.hover.top title= "Tooltip on top" >
Primary
</base-button>
<base-button size= "sm" type= "info" class= "btn-tooltip"
v-b-tooltip.hover.top title= "Tooltip on top" >
Info
</base-button>
<base-button size= "sm" type= "success" class= "btn-tooltip"
v-b-tooltip.hover.top title= "Tooltip on top" >
Success
</base-button>
<base-button size= "sm" type= "warning" class= "btn-tooltip"
v-b-tooltip.hover.top title= "Tooltip on top" >
Warning
</base-button>
<base-button size= "sm" type= "danger" class= "btn-tooltip"
v-b-tooltip.hover.top title= "Tooltip on top" >
Danger
</base-button>
<base-button size= "sm" type= "default" class= "btn-tooltip"
v-b-tooltip.hover.top title= "Tooltip on top" >
Default
</base-button>
<base-button size= "sm" type= "secondary" class= "btn-tooltip"
v-b-tooltip.hover.top title= "Tooltip on top" >
Secondary
</base-button>
Position
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
<base-button size= "sm" type= "primary" class= "btn-tooltip"
v-b-tooltip.hover.top title= "Tooltip on top" > Tooltip on top
</base-button>
<base-button size= "sm" type= "primary" class= "btn-tooltip"
v-b-tooltip.hover.right title= "Tooltip on right" > Tooltip on right
</base-button>
<base-button size= "sm" type= "primary" class= "btn-tooltip"
v-b-tooltip.hover.bottom title= "Tooltip on bottom" > Tooltip on bottom
</base-button>
<base-button size= "sm" type= "primary" class= "btn-tooltip"
v-b-tooltip.hover.left title= "Tooltip on left" > Tooltip on left
</base-button>
<script>
import { VBTooltip } from " bootstrap-vue/esm/directives/tooltip/tooltip " ;
import { VBPopover } from " bootstrap-vue/esm/directives/popover/popover " ;
import " bootstrap-vue/dist/bootstrap-vue.min.css " ;
export default {
directives : {
BTooltip : VBTooltip ,
BPopover : VBPopover ,
}
};
</script>