Non riesco ad utilizzare i trigger "hover" e "outsideClick" su Angular Bootstrap Tooltips

Question

Sto utilizzando Angular Bootstrap e voglio che i miei suggerimenti vengano attivati ​​utilizzando un "passaggio del mouse" sul desktop e "fai clic" sui dispositivi mobili che possono 't hover ma anche i tooltip sono chiusi se fai clic all'esterno del suggerimento. L'ho impostato su tooltip-trigger = "hover outsideClick" poiché "outsideClick" ora è un trigger supportato (https://github.com/angular-ui/bootstrap/tree/master/src/tooltip/docs), tuttavia ciò interrompe completamente il tooltip in modo che anche l'hover non funzioni.

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

C'è un modo per far funzionare questi lavori insieme?

Se mi basta usare tooltip-trigger = "Hover click" è decente, ma il dispositivo mobile può chiudere solo il tooltip cliccando nuovamente l'elemento, contro la possibilità di cliccare altrove sulla pagina per chiuderla.

Answer 1

Hai provato tooltip-trigger="mouseenter outsideClick"? Sembra che hover non sia menzionato nel doc.

Answer 2

Se è possibile utilizzare la libreria di bootstrap nativa? Come supporta ciò che stai cercando di default.

Ho creato un jsfiddle dimostrando questo (si prega di vederlo sul tuo dispositivo mobile per vedere i tootlips di lavoro come previsto)

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

È può leggere su di esso here, come nota a margine, è necessario abilitare manualmente il suggerimento

Per motivi di prestazioni, i dati-apis Tooltip e Popover sono opt-in, che significa che è necessario inizializzarli da soli.

Un modo per inizializzare tutte le descrizioni dei comandi in una pagina potrebbe essere quella di selezionarle dal loro attributo data-toggle:

Answer 3

Penso che quello che stai cercando è il tooltip-trigger="hover focus", il focus agirà come il outsideClick, chiudendo il suggerimento al prossimo clic fatto dall'utente. L'ho usato personalmente e funziona benissimo sia per dispositivi mobili che desktop.

In realtà è impostato su hover focus per cui non è necessario aggiungerli manualmente.