Nie mogę używać wyzwalaczy "hover" i "outsideClick" na etykietach Angular Bootstrap Tooltips

Question

Używam Angular Bootstrap i chcę, aby moje podpowiedzi były uruchamiane za pomocą "najechania" na pulpicie i "kliknięcia" na urządzeniach mobilnych, które mogą Najedź kursorem, ale zamknij także podpowiedzi, jeśli klikniesz poza podpowiedź. Ustawiłem to na tooltip-trigger = "hover outsideClick", ponieważ "outsideClick" jest teraz obsługiwanym wyzwalaczem (https://github.com/angular-ui/bootstrap/tree/master/src/tooltip/docs), jednak powoduje to całkowite rozbicie podpowiedzi, więc nawet dymek nie działa.

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

Czy istnieje sposób na ich współpracę?

Gdybym po prostu użyć tooltip-spust = „Hover kliknij” jest przyzwoity, ale na telefon mogę zamknąć tylko podpowiedź, klikając pozycję ponownie, w porównaniu mogąc kliknij w innym miejscu na stronie, aby je zamknąć.

Answer 1

Czy próbowałeś już tooltip-trigger="mouseenter outsideClick"? Wygląda na to, że w dokumencie nie wymieniono hover.

Answer 2

Jeśli istnieje szansa, możesz użyć natywnej biblioteki bootstrap? Ponieważ domyślnie obsługuje to, czego szukasz.

Stworzyłem jsfiddle demonstrując to (proszę zobaczyć go na swoim urządzeniu mobilnym, aby zobaczyć tootlips działa zgodnie z oczekiwaniami)

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 można odczytać na nim here, na marginesie, należy ręcznie włączyć etykietę narzędzia

Ze względów wydajnościowych, etykiety narzędzi i dane Popover-apis są włączane, , co oznacza, że ​​należy je zainicjować samodzielnie.

Jednym ze sposobów, aby zainicjować wszystkie podpowiedzi na stronie byłoby je wyselekcjonować ich data-toggle atrybut:

Answer 3

myślę co szukasz jest tooltip-trigger="hover focus" The focus będzie działać jako outsideClick, zamykanie podpowiedzi przy kolejnym kliknięciu użytkownika. Osobiście to wykorzystałem i działa świetnie zarówno na urządzeniach mobilnych, jak i na komputerach.

To domyślnie jest hover focus, więc nie powinieneś dodawać ich ręcznie.