En utilisant Bootstrap info-bulle avec AngularJS

Afin d'obtenir les info-bulles de travailler en premier lieu, vous devez les initialiser dans votre code. Ignorant AngularJS pour un deuxième, c'est comment vous obtenez les info-bulles de travailler en jQuery:

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

Cela permettra également de travailler dans une application AngularJS tant que c'est pas le rendu du contenu par Angulaire (par exemple: ng-repeat). Dans ce cas, vous avez besoin de rédiger une directive pour gérer cela. Voici une directive simple qui a fonctionné pour moi:

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

Puis tout ce que vous avez à faire est d'inclure la "bulle d'aide" l'attribut de l'élément que vous voulez l'info-bulle apparaisse sur:

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

Espère que ça aide!

Réponse Simple - à l'aide de l'INTERFACE utilisateur Bootstrap (l'interface utilisateur.bootstrap.info-bulle)

Il semble y avoir un tas de très complexe, les réponses à cette question. Voici ce qui a fonctionné pour moi.

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

2. Injecter UI Bootstrap comme une dépendance - angular.module('myModule', ['ui.bootstrap']);

3. Utiliser le uib-info-bulle de la directive dans votre code html.

---

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

Avez-vous inclus le Bootstrap JS et 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>

Si vous ne l'avez pas déjà chargement, puis Angulaire de l'INTERFACE utilisateur (http://angular-ui.github.io/bootstrap/) ne peut pas être beaucoup de frais généraux. - Je l'utiliser avec mon Angulaire de l'application, et il a une info-bulle de la directive. Essayez d'utiliser tooltip="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>

Vous pouvez utiliser selector option dynamique single page applications:

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

si un sélecteur est fourni, l'info-bulle des objets sera déléguée à la
des objectifs spécifiques. Dans la pratique, ce est utilisé pour activer le HTML dynamique
contenu pour avoir les info-bulles ajouté.

Vous pouvez faire cela avec AngularStrap qui

est un ensemble de native directives qui permet une parfaite intégration de Bootstrap 3.0+ dans votre AngularJS 1.2+ app."

Vous pouvez injecter la totalité de la bibliothèque comme ceci:

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

Ou seulement tirer dans l'info-bulle fonction comme ceci:

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

Démo dans la Pile des Extraits

JS:

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

HTML:

<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>

JS:

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

HTML:

<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>

De lire ce si vous attribuez des info-bulles dynamiquement

c'est à dire <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>

J'ai eu un problème avec la dynamique des info-bulles qui n'ont pas toujours la mise à jour de la vue. Par exemple, je faisais quelque chose comme ceci:

Cela n'a pas fonctionné de façon constante

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

Et de l'activation de la manière suivante:

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

Cependant, comme mon peuple tableau voudrais changer mon info-bulles ne sont pas toujours mise à jour. J'ai essayé toutes les fixer dans ce fil et d'autres avec pas de chance. Le problème semblait être seulement qui se passe autour de 5% du temps, et il était presque impossible à répéter.

Malheureusement, ces info-bulles sont essentiels à la mission, pour mon projet, et montrant une mauvaise info-bulle pourrait être très mauvais.

Ce qui semblait être la question

Bootstrap a été la copie de la valeur de la title propriété à un nouvel attribut, data-original-title et la suppression de la title bien (parfois) quand je veux activer le toooltips. Toutefois, lorsque mon title={{ person.tooltip }} changerait la nouvelle valeur n'est pas toujours à jour dans la propriété data-original-title. J'ai essayé de désactiver les info-bulles et la réactivation d'eux, de les détruire, les contraignant à cette propriété directement... de tout. Toutefois, chacune de ces soit n'ont pas de travail ou créé de nouveaux problèmes, comme la title et data-original-title attributs à la fois enlevé et non-reliés de mon objet.

Ce qui a fait un travail

Peut-être le plus laid de code que j'ai jamais poussé, mais il a résolu ce petit problème important pour moi. J'exécute ce code à chaque fois que l'info-bulle est mise à jour avec les nouvelles données:

$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);

Ce qui se passe ici, en essence:

• Attendre un certain temps (1500 ms) pour le résumé du cycle, et la titles être mis à jour.
• Si il y a un title propriété qui n'est pas vide (c'est à dire qu'il a été modifié), le copier dans le data-original-title de la propriété de sorte qu'il sera ramassé par Bootstrap est toolips.
• Réactiver les info-bulles

Espère que cette longue réponse aide à quelqu'un qui peut avoir été mal comme je l'ai été.

pour obtenir des info-bulles pour actualiser lorsque les changements de modèle, j'ai simplement utiliser data-original-title au lieu de title.

par exemple

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

remarque que je suis de l'initialisation de l'utilisation de bulles comme ceci:

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

versions:

• AngularJS 1.4.10
• bootstrap 3.1.1
• jquery: 1.11.0

impproving @aStewartDesign réponse:

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

Il n'y a pas besoin de jquery, c'est un retard de réponse mais j'ai trouvé depuis c'est le top voté un, je me dois de souligner cela.