{{ overviewIntro }}

{{ t.common.sectionDescription }}

{{ descriptionBody }}

{{ t.common.sectionFeatures }}

{{ item }}

{{ t.common.sectionLimitations }}

{{ item }}

{{ tooltipEventLog.isEmpty ? t.pages.tooltip.idle : tooltipEventLog }}

{{ autoCloseTitle }}

{{ autoCloseBody }}

{{ containerBodyTitle }}

{{ containerBodyText }}

{{ customTargetTitle }}

{{ customTargetBody }}

{{ templateTitle }}

{{ templateBody }}

{{ delayTitle }}

{{ delayBody }}

{{ customClassTitle }}

{{ customClassBody }}

{{ globalConfigTitle }}

{{ globalConfigBody }}

{{ apiIntro }}

{{ item }}

<button
  [liTooltip]="'Tooltip direto no botão'"
  placement="top"
  triggers="hover focus">
  Hover tooltip
</button>

<button
  [liTooltip]="tooltipTemplate"
  triggers="click"
  container="body"
  tooltipClass="tooltip-aurora">
  Tooltip com template
</button>

<template #tooltipTemplate>
  <div class="fw-semibold mb-1">TemplateRef dentro do tooltip</div>
  <div class="small text-white-50">Bindings continuam vivos.</div>
</template>

<button
  #tooltip="liTooltip"
  [liTooltip]="'Ancorado em outro elemento'"
  triggers="manual"
  [positionTarget]="'#target-anchor'"
  (click)="tooltip.toggle()">
  Abrir tooltip manual
</button>

<span id="target-anchor">Âncora visual</span>

@Component(
  providers: [ClassProvider(LiTooltipConfig)],
)
class DemoTooltipDefaults {
  DemoTooltipDefaults(LiTooltipConfig config) {
    config.triggers = 'click';
    config.placement = 'right';
    config.tooltipClass = 'tooltip-config-demo';
  }
}

<li-tooltip
  [text]="'Mostra dicas ao passar o mouse.'"
  placement="top"
  trigger="hover">
  <button class="btn btn-outline-primary" type="button">Hover tooltip</button>
</li-tooltip>