Отображать всплывающую подсказку ngx bootstrap при входе или наведении мыши и удалять при нажатии на мышь, удаленную оттуда

Я не совсем понимаю концепцию того, что именно триггеры делают для https://valor-software.com/ngx-bootstrap/#/tooltip#triggers-custom

Например, когда мы делаем:

triggers="mouseenter:click"

Означает ли это, что всплывающая подсказка будет отображаться, когда мы наводим/наводим туда мышь, и исчезает при нажатии?

Если да, то можно ли указать два события, при которых всплывающая подсказка должна исчезнуть.

Например, я хочу отображать всплывающую подсказку, когда я навожу на нее курсор, а затем заставлять ее исчезать, когда я нажимаю на нее или убираю оттуда мышь. Любые идеи?


angular ngx-bootstrap angular2-template
person user1892775    schedule 13.02.2018    source источник
comment
У меня такая же проблема, вы когда-нибудь разобрались?   -  person koolhuman    schedule 02.03.2018
comment
Ответ от Николы сработал для меня   -  person user1892775    schedule 02.03.2018

Ответы (3)


arrow_upward
5
arrow_downward

Вы можете использовать массив событий, что-то вроде этого может работать: triggers="mouseenter mouseleave click"

triggers => Определяет события, которые должны запускаться. Поддерживает список имен событий, разделенных пробелами.

person Nikola Gavric    schedule 13.02.2018

arrow_upward
0
arrow_downward

Вы можете играть как с Пользовательскими триггерами, так и с Запуск вручную:

<button 
  tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
  triggers="mouseenter:mouseleave"
  #pop="bs-tooltip"
  (click)="pop.hide()"
>Tooltip</button>

Этот код не будет запускать всплывающую подсказку по щелчку, когда она скрыта. Тот же результат, когда вы применяете triggers="mouseenter click:mouseleave click" без (click), но это выглядит халтурно... может это баг, но triggers="mouseenter:mouseleave click" не дает такого результата. В любом случае, работая с (click) вручную, вы получаете относительную гибкость.

person dhilt    schedule 13.02.2018

arrow_upward
0
arrow_downward

Принятый ответ @Nikola Gavric не показывает проблемы в следующем: mouseenter (показать всплывающую подсказку) › click (скрыть всплывающую подсказку) › mouseleave (показать всплывающую подсказку снова).

Для тех, кому нужен триггер, например, в действии строки меню Gmail (чтобы отображать всплывающую подсказку при наведении курсора мыши и скрывать ее, когда мышь оставляет или щелкает), используйте ниже

triggers="mouseenter:mouseleave mouseenter:click"
person Anh-Thi DINH    schedule 15.04.2021