Utilizzo di Bootstrap Tooltip con AngularJS

Sto cercando di utilizzare il tooltip di Bootstrap in una mia app. La mia app utilizza AngularJS Attualmente, ho quanto segue:

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left">
            Tooltip on left
</button>

Penso di aver bisogno di usare

$("[data-toggle=tooltip]").tooltip();

Tuttavia, non ne sono sicuro. Anche quando aggiungo la riga sopra, il mio codice non funziona. Sto cercando di evitare di utilizzare il bootstrap dell'interfaccia utente poiché ha più del necessario. Tuttavia, se dovessi includere solo il pezzo di descrizione comando, sarei aperto a questo. Tuttavia, non riesco a capire come farlo.

Qualcuno può mostrarmi come far funzionare il Tooltip Bootstrap con AngularJS?

Per fare in modo che i suggerimenti funzionino in primo luogo, è necessario inizializzarli nel codice. Ignorando AngularJS per un secondo, ecco come far funzionare i suggerimenti in jQuery:

$(document).ready(function(){
    $('[data-toggle=tooltip]').hover(function(){
        // on mouseenter
        $(this).tooltip('show');
    }, function(){
        // on mouseleave
        $(this).tooltip('hide');
    });
});

Funzionerà anche in un'app AngularJS fintanto che non è contenuto reso da Angular (ad esempio: ng-repeat). In tal caso, è necessario scrivere una direttiva per gestirlo. Ecco una semplice direttiva che ha funzionato per me:

app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.hover(function(){
                // on mouseenter
                element.tooltip('show');
            }, function(){
                // on mouseleave
                element.tooltip('hide');
            });
        }
    };
});

Quindi tutto ciò che devi fare è includere l'attributo "tooltip" sull'elemento su cui desideri che appaia il suggerimento:

<a href="#0" title="My Tooltip!" data-toggle="tooltip" data-placement="top" tooltip>My Tooltip Link</a>

Spero che aiuti!

La soluzione migliore che sono riuscito a trovare è includere un attributo "onmouseenter" nel tuo elemento in questo modo:

<button type="button" class="btn btn-default" 
    data-placement="left"
    title="Tooltip on left"
    onmouseenter="$(this).tooltip('show')">
</button>

Risposta semplice : utilizzando UI Bootstrap ( ui.bootstrap.tooltip )

Sembra che ci siano molte risposte complesse a questa domanda. Ecco cosa ha funzionato per me.

1. Installa Bootstrap UI -$ bower install angular-bootstrap

2. Iniettare Bootstrap dell'interfaccia utente come dipendenza - angular.module('myModule', ['ui.bootstrap']);

3. Usa la direttiva uib-tooltip nel tuo html.

<button class="btn btn-default"
        type="button"
        uib-tooltip="I'm a tooltip!">
     I'm a button!
</button>

Se stai creando un'app Angular, puoi utilizzare jQuery, ma ci sono molti buoni motivi per cercare di evitarlo a favore di paradigmi più angolari. È possibile continuare a utilizzare gli stili forniti da bootstrap, ma sostituire i plugin jQuery con angular nativo utilizzando UI Bootstrap

Includere i file CSS Boostrap, Angular.js e ui.Bootstrap.js:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.angularjs.org/1.2.20/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

Assicurati di aver iniettato ui.bootstrapquando crei il tuo modulo in questo modo:

var app = angular.module('plunker', ['ui.bootstrap']);

Quindi puoi utilizzare direttive angolari invece di attributi di dati raccolti da jQuery:

<button type="button" class="btn btn-default" 
        title="Tooltip on left" data-toggle="tooltip" data-placement="left"
        tooltip="Tooltip on left" tooltip-placement="left" >
  Tooltip on left
</button>

Demo in Plunker

Evitare il bootstrap dell'interfaccia utente

jQuery.min.js (94kb) + Bootstrap.min.js (32kb) ti offre anche più del necessario e molto di più di ui-bootstrap.min.js (41kb) .

E il tempo impiegato per scaricare i moduli è solo un aspetto delle prestazioni.

Se vuoi davvero caricare solo i moduli di cui hai bisogno, puoi "Crea una build" e scegliere i suggerimenti dal sito web Bootstrap-UI . Oppure puoi esplorare il codice sorgente per i suggerimenti e scegliere ciò di cui hai bisogno.

Ecco una build personalizzata minimizzata con solo i suggerimenti e i modelli (6kb)

Hai incluso Bootstrap JS e jQuery?

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

Se non li carichi già, l'interfaccia utente Angular ( http://angular-ui.github.io/bootstrap/ ) potrebbe non essere molto sovraccarico. Lo uso con la mia app Angular e ha una direttiva Tooltip. Prova a usaretooltip="tiptext"

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left"
        tooltip="This is a Bootstrap tooltip"
        tooltip-placement="left" >
            Tooltip on left
</button>

Ho scritto una semplice direttiva angolare che ha funzionato bene per noi.

Ecco una demo: http://jsbin.com/tesido/edit?html,js,output

Direttiva (per Bootstrap 3) :

// registers native Twitter Bootstrap 3 tooltips
app.directive('bootstrapTooltip', function() {
  return function(scope, element, attrs) {
    attrs.$observe('title',function(title){
      // Destroy any existing tooltips (otherwise new ones won't get initialized)
      element.tooltip('destroy');
      // Only initialize the tooltip if there's text (prevents empty tooltips)
      if (jQuery.trim(title)) element.tooltip();
    })
    element.on('$destroy', function() {
      element.tooltip('destroy');
      delete attrs.$$observers['title'];
    });
  }
});

Nota: se stai usando Bootstrap 4, nelle righe 6 e 11 sopra dovrai sostituire tooltip('destroy')con tooltip('dispose')(Grazie a user1191559 per questo aggiornamento )

Aggiungi semplicemente bootstrap-tooltipcome attributo a qualsiasi elemento con estensione title. Angular monitorerà le modifiche al filetitle ma altrimenti passerà la gestione del tooltip a Bootstrap.

Ciò consente anche di utilizzare qualsiasi opzione nativa di Bootstrap Tooltip come data-attributi nel normale modo Bootstrap.

Markup :

<div bootstrap-tooltip data-placement="left" title="Tooltip on left">
        Tooltip on left
</div>

Chiaramente questo non ha tutti i collegamenti elaborati e l'integrazione avanzata che AngularStrap e UI Bootstrap offrono, ma è una buona soluzione se stai già utilizzando JS di Bootstrap nella tua app Angular e hai solo bisogno di un ponte di tooltip di base su tutta la tua app senza modificare i controller o gestire gli eventi del mouse.

È possibile utilizzare l' selector opzione per applicazioni dinamiche a pagina singola:

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

se viene fornito un selettore, gli oggetti tooltip verranno delegati ai target specificati. In pratica, questo viene utilizzato per abilitare il contenuto HTML dinamico per l'aggiunta di descrizioni comandi.

Puoi creare una semplice direttiva come questa:

angular.module('myApp',[])
    .directive('myTooltip', function(){
        return {
            restrict: 'A',
            link: function(scope, element){
                element.tooltip();
            }
        }
    });

Quindi, aggiungi la tua direttiva personalizzata dove è necessario:

<button my-tooltip></button>

Puoi farlo con AngularStrap che

è un insieme di direttive native che consente una perfetta integrazione di Bootstrap 3.0+ nella tua app AngularJS 1.2+. "

Puoi iniettare l'intera libreria in questo modo:

var app = angular.module('MyApp', ['mgcrea.ngStrap']); 

Oppure inserisci solo la funzione di descrizione comando in questo modo:

var app = angular.module('MyApp', ['mgcrea.ngStrap.tooltip']); 

Demo in Stack Snippets

var app = angular.module('MyApp', ['mgcrea.ngStrap']);  

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>

<div ng-app="MyApp" class="container" >

  <button type="button" 
          class="btn btn-default" 
          data-trigger="hover" 
          data-placement="right"
          data-title="Tooltip on right"
          bs-tooltip>
    MyButton
  </button>

</div>

modo più semplice, aggiungere $("[data-toggle=tooltip]").tooltip();al controller interessato.

Per favore ricorda una cosa se vuoi usare il tooltip di bootstrap in angularjs è l'ordine dei tuoi script se stai usando anche jquery-ui, dovrebbe essere:

• jQuery
• jQuery UI
• Bootstap

È provato e testato

Leggilo solo se assegni i suggerimenti in modo dinamico

cioè <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>

Ho avuto un problema con i suggerimenti dinamici che non venivano sempre aggiornati con la vista. Ad esempio, stavo facendo qualcosa del genere:

Questo non ha funzionato in modo coerente

<div ng-repeat="person in people">
    <span data-toggle="tooltip" data-placement="top" title="{{ person.tooltip }}">
      {{ person.name }}
    </span> 
</div> 

E attivandolo in questo modo:

$timeout(function() {
  $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 1500)

Tuttavia, poiché il mio array di persone cambiava, i miei suggerimenti non si aggiornavano sempre. Ho provato ogni correzione in questo thread e in altri senza fortuna. Il problema tecnico sembrava verificarsi solo circa il 5% delle volte ed era quasi impossibile ripeterlo.

Sfortunatamente, questi suggerimenti sono fondamentali per il mio progetto e mostrare un suggerimento errato potrebbe essere molto negativo.

Quale sembrava essere il problema

Bootstrap stava copiando il valore della titleproprietà in un nuovo attributo data-original-titlee rimuovendo la titleproprietà (a volte) quando avrei attivato i toooltips. Tuttavia, quando my title={{ person.tooltip }}cambiava, il nuovo valore non veniva sempre aggiornato nella proprietà data-original-title. Ho provato a disattivare i tooltip e riattivarli, distruggendoli, legandomi direttamente a questa proprietà ... tutto. Tuttavia, ognuno di questi non ha funzionato o ha creato nuovi problemi; come iltitledata-original-title attributi e entrambi rimossi e non associati dal mio oggetto.

Cosa ha funzionato

Forse il codice più brutto che abbia mai inserito, ma ha risolto questo piccolo ma sostanziale problema per me. Eseguo questo codice ogni volta che il suggerimento viene aggiornato con nuovi dati:

$timeout(function() {
    $('[data-toggle="tooltip"]').each(function(index) {
      // sometimes the title is blank for no apparent reason. don't override in these cases.
      if ($(this).attr("title").length > 0) {
        $( this ).attr("data-original-title", $(this).attr("title"));
      }
    });
    $timeout(function() {
      // finally, activate the tooltips
      $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
    }, 500);
}, 1500);

Quello che sta succedendo qui in sostanza è:

• Attendi un po 'di tempo (1500 ms) per il completamento del ciclo di digest e il file title aggiornamento dei messaggi di posta elettronica.
• Se c'è una titleproprietà che non è vuota (cioè è cambiata), data-original-titlecopiala nella proprietà in modo che venga rilevata dai suggerimenti di Bootstrap.
• Riattiva i suggerimenti

Spero che questa lunga risposta aiuti qualcuno che potrebbe aver lottato come me.

Prova il Tooltip (ui.bootstrap.tooltip). Vedi Direttive angolari per Bootstrap

<button type="button" class="btn btn-default" tooltip-placement="bottom" uib-tooltip="tooltip message">Test</button>

Si consiglia di evitare il codice JavaScript nella parte superiore di AngularJS

per fare in modo che le descrizioni comandi si aggiornino quando il modello cambia , uso semplicemente al data-original-titleposto dititle .

per esempio

<i class="fa fa-gift" data-toggle="tooltip" data-html="true" data-original-title={{getGiftMessage(gift)}} ></i>

nota che sto inizializzando l'uso di suggerimenti come questo:

<script type="text/javascript">
    $(function () {
        $("body").tooltip({ selector: '[data-toggle=tooltip]' });
    })
</script>

versioni:

• AngularJS 1.4.10
• bootstrap 3.1.1
• jquery: 1.11.0

AngularStrap non funziona in IE8 con angularjs versione 1.2.9, quindi non usarlo se la tua applicazione deve supportare IE8

impproving @aStewartDesign risposta:

.directive('tooltip', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
      element.hover(function(){
        element.tooltip('show');
      }, function(){
        element.tooltip('hide');
      });
    }
  };
});

Non c'è bisogno di jquery, è una risposta in ritardo ma ho pensato che dato che è il più votato, dovrei farlo notare.

installa le dipendenze:

npm install jquery --save
npm install tether --save
npm install bootstrap@version --save;

quindi, aggiungi gli script nel tuo angular-cli.json

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "script.js"
    ]

quindi, crea un file script.js

$("[data-toggle=tooltip]").tooltip();

ora riavvia il tuo server.

A causa della funzione tooltip, devi dire ad angularJS che stai usando jQuery.

Questa è la tua direttiva:

myApp.directive('tooltip', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('mouseenter', function () {
                jQuery.noConflict();
                (function ($) {
                    $(element[0]).tooltip('show');
                })(jQuery);
            });
        }
    };
});

e questo è come usare la direttiva:

<a href="#" title="ToolTip!" data-toggle="tooltip" tooltip></a>