Блог

Я использую функциональность всплывающей подсказки ngx-bootstraps, и поведение, которое я ищу, заключается в отображении всплывающей подсказки при наведении курсора на рабочий стол, но, по сути, полностью отключаю ее на мобильном устройстве. Подумал, что если я заблокирую его, чтобы использовать только триггер наведения, это решит мою проблему.

В документации утверждается, что триггерами по умолчанию для всплывающей подсказки являются triggers="hover focus" . Поскольку я не хочу, чтобы фокус действовал, я вручную установил триггеры на triggers="hover" .

Это работает, как ожидалось, на рабочем столе, всплывающая подсказка отображается при наведении; но на мобильных устройствах всплывающая подсказка по-прежнему продолжает отображаться при нажатии, как если бы триггер фокусировки все еще действовал.

Есть ли что-то конкретное, что мне нужно сделать, чтобы отключить поведение по умолчанию?

Шаблон ниже:

 <ng-template #tooltipTemplate>
  <div class="notification-level-tooltip tooltip-inner">
    <span class="tooltip-text">
      {{details | translate}}
    </span>
  </div>
</ng-template>

<span class="notification-level label" [ngClass]="labelClass" [tooltip]="tooltipTemplate" triggers="hover">
  {{text | translate}}
</span>
  

Вы можете поместить эти классы notification-level-tooltip tooltip-inner в мультимедийные запросы css, указав min и max размеры экрана, в вашем случае рабочего стола. Затем эти запросы позаботятся о том, что будет отображаться на экране того или иного размера. Как работают запросы @media