Я не могу использовать триггеры "hover" и "outsideClick" на Angular подсказках Bootstrap

Я использую Angular Bootstrap и хочу, чтобы мои подсказки подсказывали, используя "зависание" на рабочем столе и "click" на мобильных устройствах, которые не могут навешиваться, но также имеют всплывающие подсказки, если вы выходите за пределы всплывающей подсказки. Я установил его в tooltip-trigger = "hover outsideClick" , так как "outsideClick" теперь является поддерживаемым триггером (https://github.com/angular-ui/bootstrap/tree/master/src/tooltip/docs), однако это полностью вскрывает всплывающую подсказку, поэтому даже наведение не работает.

<span class="glyphicon glyphicon-info-sign" tooltip-trigger="hover outsideClick" uib-tooltip="Tooltip text here"></span>

Есть ли способ сделать эти работы вместе?

Если я просто использую tooltip-trigger = "hover click" , он приличный, но на мобильном телефоне я могу только закрыть всплывающую подсказку, щелкнув элемент снова, по сравнению с тем, чтобы щелкнуть в другом месте на странице, чтобы закройте его.

Ответы

Ответ 1

Вы пробовали tooltip-trigger="mouseenter outsideClick"? Похоже, что hover не упоминается в документе.

Ответ 2

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

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

HTML:

<div class="row">
  <div class="col-md-12">
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
  </div>
</div>

JS:

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
});

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

По соображениям производительности всплывающая подсказка и popover-apis являются опциями, , что означает, что вы должны их инициализировать самостоятельно.

Один из способов инициализации всех всплывающих подсказок на странице - выбрать их по атрибуту data-toggle:

Ответ 3

Я думаю, что вы ищете tooltip-trigger="hover focus", focus будет действовать как outsideClick, закрывая всплывающую подсказку при следующем щелчке, который пользователь делает. Я лично использовал это, и он отлично работает как для мобильных, так и для настольных компьютеров.

Фактически по умолчанию используется hover focus, поэтому вам даже не нужно добавлять их вручную.