Tooltips
Standard Tooltips
Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.
<p>Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.</p>
Tooltips Position
<button type="button" class="btn btn-theme" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-theme" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-theme" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-theme" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
Tooltip on left
</button>
Colored Tooltip
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="This top tooltip default color.">
Default
</button>
<button type="button" class="btn btn-theme" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="adminuiux-theme-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
Theme
</button>
<button type="button" class="btn btn-accent" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="adminuiux-accent-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
Accent
</button>
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="adminuiux-success-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
Success
</button>
<button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="adminuiux-warning-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
Warning
</button>
<button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="adminuiux-danger-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
Danger
</button>
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="adminuiux-info-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
Info
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="adminuiux-primary-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
Primary
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-custom-class="adminuiux-secondary-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
Secondary
</button>
<button type="button" class="btn btn-light" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="adminuiux-light-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
Light
</button>