Я не могу использовать триггеры «hover» и «outsideClick» на Angular Bootstrap Tooltips

Question

Я использую Angular Bootstrap и хочу, чтобы мои подсказки подсказки отображались на рабочем столе и «нажимали» на мобильных устройствах, которые могут 't hover, но также и всплывающие подсказки, если вы выйдете за пределы всплывающей подсказки. Я установил его в 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> 

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

Если я просто использовать подсказку-триггер = «наведение мыши» это приличное, но на мобильном телефоне я могу закрыть только подсказку, повторно щелкнув элемент, в зависимости от возможности щелкнуть в другом месте на странице, чтобы закрыть его.

Answer 1

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

Answer 2

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

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

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() 
}); 

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

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

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

Answer 3

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

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