Tooltips

Animated tooltips to provide annotation on content when hovered over
Default Bootstrap Tooltips
button.btn.btn-primary(type='button', data-bs-toggle='tooltip', data-bs-placement='top', title='Tooltip on top')
    | Tooltip on top

button.btn.btn-primary(type='button', data-bs-toggle='tooltip', data-bs-placement='right', title='Tooltip on right')
    | Tooltip on right

button.btn.btn-primary(type='button', data-bs-toggle='tooltip', data-bs-placement='bottom', title='Tooltip on bottom')
    | Tooltip on bottom

button.btn.btn-primary(type='button', data-bs-toggle='tooltip', data-bs-placement='left', title='Tooltip on left')
    | Tooltip on left

Tooltips are visible when an element is hovered over.

By default, using tooltips via data attributes is enabled globally within the SB Admin Pro theme. You can change this default by modifying the js/scripts.js file.
Default Bootstrap Popovers
Popover on top
Popover on right
Popover on bottom
Popover on left
a.btn.btn-primary(href='#!', tabindex='0', title='Popover Title', data-bs-container='body', data-bs-toggle='popover', data-bs-placement='top', data-bs-content='This popover is on the top!')
    | Popover on top

a.btn.btn-primary(href='#!', tabindex='0', title='Popover Title', data-bs-container='body', data-bs-toggle='popover', data-bs-placement='right', data-bs-content='This popover is on the right!')
    | Popover on right

a.btn.btn-primary(href='#!', tabindex='0', title='Popover Title', data-bs-container='body', data-bs-toggle='popover', data-bs-placement='bottom', data-bs-content='This popover is on the bottom!')
    | Popover on bottom

a.btn.btn-primary(href='#!', tabindex='0', title='Popover Title', data-bs-container='body', data-bs-toggle='popover', data-bs-placement='left', data-bs-content='This popover is on the left!')
    | Popover on left

Popovers are visible when an element is clicked, or focused.

By default, using popovers via data attributes is enabled globally within the SB Admin Pro theme. You can change this default by modifying the js/scripts.js file. The above popovers are dismissable on the user's next click. You can disable this functionality in the js/scripts.js file as well.
Bootstrap Documentation Available

Tooltips and popovers are default components included with the Bootstrap framework. For more information on implementing, modifying, and extending the usage of tooltips and popovers within your project, visit the official Bootstrap documentation.

Visit Bootstrap Tooltips Docs Visit Bootstrap Popovers Docs