Saltar al contenido principal
NeuralUIv1.14.3Nuevo
GitHub
Componente

Tooltip

Directiva que muestra un globo informativo al hacer hover o focus. Usa CDK Overlay para un posicionamiento robusto y expone la relación mediante aria-describedby.

TypeScript
import { NeuTooltipDirective } from '@neural-ui/core/tooltip';
Hover
HTML
<!-- Posición por defecto: top / Default position: top -->
<button [neuTooltip]="'Save changes'">Save</button>

<!-- Posición personalizada / Custom position -->
<button [neuTooltip]="'Delete record'" neuTooltipPosition="bottom">
  Delete
</button>

<!-- En cualquier elemento HTML / On any HTML element -->
<span [neuTooltip]="'More information'">ⓘ</span>

<!-- Deshabilitado condicionalmente / Conditionally disabled -->
<button
  [neuTooltip]="'Not available in read-only mode'"
  [neuTooltipDisabled]="isReadOnly()"
>
  Edit
</button>