mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
31 lines
1.0 KiB
Markdown
31 lines
1.0 KiB
Markdown
---
|
|
title: Tooltips
|
|
menu: docs.tooltips
|
|
description: The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element.
|
|
---
|
|
|
|
### Default markup
|
|
|
|
{% example html wrapper=btn-list %}
|
|
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
|
|
Tooltip on top
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
|
|
Tooltip on right
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
|
|
Tooltip on bottom
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
|
|
Tooltip on left
|
|
</button>
|
|
{% endexample %}
|
|
|
|
### Tooltip with HTML
|
|
|
|
{% example html wrapper=btn-list %}
|
|
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
|
|
Tooltip with HTML
|
|
</button>
|
|
{% endexample %}
|