Tooltip
Tooltip Basic
Preview:
Tooltip Placement Top
<c-bs-tooltip text="Tooltip on top" placement="top">
<c-bs-button variant="secondary">Top</c-bs-button>
</c-bs-tooltip>
Preview:
Tooltip Placement Right
<c-bs-tooltip text="Tooltip on right" placement="right">
<c-bs-button variant="secondary">Right</c-bs-button>
</c-bs-tooltip>
Preview:
Tooltip Placement Bottom
<c-bs-tooltip text="Tooltip on bottom" placement="bottom">
<c-bs-button variant="secondary">Bottom</c-bs-button>
</c-bs-tooltip>
Preview:
Tooltip Placement Left
<c-bs-tooltip text="Tooltip on left" placement="left">
<c-bs-button variant="secondary">Left</c-bs-button>
</c-bs-tooltip>
Preview:
Tooltip With Button
<c-bs-tooltip text="This top tooltip is themed via CSS variables." placement="top">
<c-bs-button variant="secondary" c-attrs="{'data-bs-custom-class': 'custom-tooltip'}">Custom tooltip</c-bs-button>
</c-bs-tooltip>
Preview:
Tooltip Disabled Button Wrapper
<c-bs-tooltip text="Disabled tooltip" placement="top">
<span class="d-inline-block" tabindex="0">
<c-bs-button variant="primary" type="button" c-disabled="True">Disabled button</c-bs-button>
</span>
</c-bs-tooltip>
Preview: