NGX-Bootstrap - Angular - закрыть подсказку вручную - PullRequest
Новая
       26

NGX-Bootstrap - Angular - закрыть подсказку вручную

0 голосов
/ 17 января 2019

В настоящее время я пытаюсь вручную закрыть всплывающую подсказку до его внутренней кнопки. Я использую tooltipDirective для запуска метода tooltip.show() или tooltip.hide(). Но это не работает. Это всегда говорит ...elm.show() is not a function. Используемая разметка выглядит следующим образом: 

<ng-template #tooltip>
     <button type="button" class="btn btn-danger" (click)="elm.hide()">Cancel</button>
</ng-template>

<button type="button" triggers="" placement="bottom" (click)="elm.show()"
         class="btn btn-success" [tooltip]="tooltip">
 Publish
</button>

Кто-нибудь знает, как закрыть всплывающую подсказку от компонента? Вяз в компоненте выглядит следующим образом: 

@ViewChild('tooltip') elm: TooltipDirective;

Я предоставил настроенный Stackblitz, чтобы проверить, помогает ли это: Пример

1 Ответ

0 голосов
/ 19 января 2019

Чтобы запустить его вручную, вы должны обратиться к директиве подсказки, которая находится в button[tooltip] в вашем шаблоне:

HTML 

<button ... #tooltipTrigger="bs-tooltip" (click)="tooltipTrigger.show()"

Вы можете спросить: где я нахожу bs-tooltip строку? (В исходном коде https://github.com/valor-software/ngx-bootstrap/blob/d9a89b427fa5c79d94cd609cdf574eaf7a143bf5/src/tooltip/tooltip.directive.ts#L25)

Также, чтобы закрыть всплывающую подсказку, вы должны переопределить поведение по умолчанию с помощью pointer-events: none

глобального styles.css 

.tooltip.tooltip.tooltip {
  pointer-events: all;
}

или 

.tooltip {
  pointer-events: all !important;
}

Пример Stackblitz

...