web-dev-qa-db-fra.com

Utilisation de Bootstrap Tooltip avec AngularJS

J'essaie d'utiliser l'info-bulle Bootstrap dans une de mes applications. Mon application utilise AngularJS. Actuellement, j'ai les éléments suivants:

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

Je pense que j'ai besoin d'utiliser

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

Cependant, je ne suis pas sûr. Même si j'ajoute la ligne ci-dessus, mon code ne fonctionne pas. J'essaie d'éviter d'utiliser l'interface utilisateur bootstrap car elle en a plus que nécessaire. Cependant, si je devais inclure uniquement la bulle d'aide, je serais ouvert à cela. Pourtant, je n'arrive pas à comprendre comment faire cela.

Quelqu'un peut-il me montrer comment utiliser le Bootstrap Tooltip avec AngularJS?

angularjstwitter-bootstraptwitter-bootstrap-tooltip
88
user2871401

Pour que les info-bulles fonctionnent en premier lieu, vous devez les initialiser dans votre code. Ignorant AngularJS pendant une seconde, voici comment obtenir les infobulles pour qu'elles fonctionnent dans jQuery:

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

Cela fonctionnera également dans une application AngularJS tant qu'il ne s'agit pas d'un contenu rendu par Angular (par exemple: ng-repeat). Dans ce cas, vous devez écrire 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');
            });
        }
    };
});

Il ne vous reste plus qu'à inclure l'attribut "info-bulle" sur l'élément sur lequel vous souhaitez afficher l'info-bulle:

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

J'espère que ça t'as aidé!

145
aStewartDesign

La meilleure solution que j'ai pu trouver consiste à inclure un attribut "onmouseenter" dans votre élément, comme ceci:

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

Réponse simple - à l'aide de l'interface utilisateur Bootstrap ( i.bootstrap.tooltip )

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

  1. Installation de l'interface utilisateur - $ bower install angular-bootstrap

  2. Injecter l’interface utilisateur Bootstrap comme dépendance - angular.module('myModule', ['ui.bootstrap']);

  3. Utilisez la directive directive uib-tooltip dans votre code HTML.

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

Si vous construisez une application Angular, vous pouvez utiliser jQuery, mais il existe de nombreuses bonnes raisons de l'éviter en faveur de _.angular paradigmes pilotés. Vous pouvez continuer à utiliser les styles fournis par bootstrap, mais remplacez les plugins jQuery par native angular en utilisant UI Bootstrap

Incluez les fichiers CSS Boostrap, Angular.js et 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>

Assurez-vous que vous avez injecté ui.bootstrap lorsque vous créez votre module comme ceci:

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

Ensuite, vous pouvez utiliser les directives angular à la place des attributs de données capturés par 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>

Démo dans Plunker

Eviter le bootstrap de l'interface utilisateur

jQuery.min.js (94 Ko) + Bootstrap.min.js (32 Ko) vous offre également plus que ce dont vous avez besoin, et bien plus que i- bootstrap.min.js (41 Ko) .

Et le temps passé à télécharger les modules n'est qu'un aspect de la performance.

Si vous voulez vraiment charger uniquement les modules dont vous avez besoin, vous pouvez "Créer une construction" et choisir des info-bulles dans le site Web Site Web de Bootstrap-UI . Ou vous pouvez explorer le code source pour les info-bulles et choisir ce dont vous avez besoin.

Voici une compilation personnalisée minifiée avec juste le info-bulles et modèles (6kb)

27
KyleMit

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 les chargez pas déjà, il se peut que Angular UI ( http://angular-ui.github.io/bootstrap/ ) ne soit pas très onéreux. Je l'utilise avec mon application Angular, et elle comporte une directive Tooltip. 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>
11
prototype

J'ai écrit une simple directive Angular qui fonctionne bien pour nous.

Voici une démo: http://jsbin.com/tesido/edit?html,js,output

Directive (pour 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'];
    });
  }
});

Remarque: Si vous utilisez Bootstrap 4, aux lignes 6 et 11 ci-dessus, vous devrez remplacer tooltip('destroy') par tooltip('dispose') (Merci - ser1191559 pour cette mise à jour )

Ajoutez simplement bootstrap-tooltip en tant qu'attribut à tout élément doté d'un title. Angular surveillera les modifications apportées à la title mais passera sinon le traitement de l'info-bulle à Bootstrap.

Cela vous permet également d'utiliser n'importe quel attribut natif Boottrap Tooltip Options en tant qu'attributs data- de manière normale Bootstrap.

Balisage :

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

Clairement, cela ne présente pas toutes les liaisons complexes et l'intégration avancée qu'offrent AngularStrap et UI Bootstrap, mais c'est une bonne solution si vous utilisez déjà le logiciel JS de Bootstrap dans votre Angular app et vous avez simplement besoin d'un pont d'info-bulle de base sur l'ensemble de votre application sans modifier les contrôleurs ni gérer les événements de souris.

7
brandonjp

Vous pouvez utiliser selectoroption pour les applications dynamiques à page unique:

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

si un sélecteur est fourni, les objets d'info-bulle seront délégués aux cibles spécifiées. En pratique, cela permet au contenu HTML dynamique d’ajouter des info-bulles.

4
rinat.io

Vous pouvez créer une directive simple comme ceci:

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

Ensuite, ajoutez votre directive personnalisée où est nécessaire:

<button my-tooltip></button>
4
Emanuele Paratore

Vous pouvez le faire avec AngularStrap qui

est un ensemble de directives natives permettant l’intégration transparente de Bootstrap 3.0+ dans votre application AngularJS 1.2+. "

Vous pouvez injecter toute la bibliothèque comme ceci:

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

Ou n'utilisez que la fonction info-bulle comme ceci:

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

Démo dans des extraits de pile

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

manière la plus simple, ajoutez $("[data-toggle=tooltip]").tooltip(); au contrôleur concerné.

2
zied.hosni
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>
1
Ravi Kumar

Essayez l'infobulle (ui.bootstrap.tooltip). Voir Directives angulaires pour Bootstrap

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

Il est recommandé d’éviter le code JavaScript au sommet d’AngularJS.

1
Asha Joshi

S'il vous plaît rappelez-vous une chose si vous voulez utiliser bootstrap tooltip dans angularjs est l'ordre de vos scripts si vous utilisez également jquery-ui, il devrait être:

  • jQuery
  • jQuery UI
  • Bootstap

Il est essayé et testé

1
user6706

Ne lisez ceci que si vous attribuez des info-bulles de manière dynamique

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

J'ai eu un problème avec les info-bulles dynamiques qui n'étaient pas toujours mises à jour avec la vue. Par exemple, je faisais quelque chose comme ça:

Cela n'a pas fonctionné systématiquement

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

Et l'activer ainsi:

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

Cependant, comme mon tableau de personnes changerait, mes info-bulles ne seraient pas toujours mises à jour. J'ai essayé tous les correctifs de ce fil et d'autres sans succès. Le pépin semblait ne se produire que 5% du temps environ, et il était presque impossible de le répéter.

Malheureusement, ces info-bulles sont essentielles à la mission de mon projet et leur affichage peut être très mauvais.

Quel semblait être le problème

Bootstrap copiait la valeur de la propriété title dans un nouvel attribut, data-original-title, et supprimait la propriété title (parfois) lorsque j'activais les astuces. Cependant, lorsque mon title={{ person.tooltip }} changerait, la nouvelle valeur ne serait pas toujours mise à jour dans la propriété data-original-title. J'ai essayé de désactiver les info-bulles et de les réactiver, de les détruire, de les lier directement à cette propriété ... tout. Cependant, chacun de ces problèmes ne fonctionnait pas ou créait de nouveaux problèmes. tels que les attributs title et data-original-title étant supprimés et non liés de mon objet.

Qu'est-ce qui a fonctionné

C’est peut-être le code le plus laid que j’ai jamais proposé, mais il a résolu ce problème, petit mais important, pour moi. Je lance ce code chaque fois que l'info-bulle est mise à jour avec de 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 substance est:

  • Attendez quelque temps (1500 ms) que le cycle de résumé se termine et que la titles soit mise à jour.
  • S'il existe une propriété title qui n'est pas vide (c'est-à-dire qu'elle a été modifiée), copiez-la dans la propriété data-original-title afin qu'elle soit prise en charge par les toolips de Bootstrap.
  • Réactiver les info-bulles

J'espère que cette longue réponse aidera quelqu'un qui a peut-être eu des difficultés comme moi.

1
Matt

pour obtenir des info-bulles à actualiser lorsque le modèle change, j'utilise simplement 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>

notez que j'initialise l'utilisation des info-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
0
zim

améliorer la réponse de @aStewartDesign:

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

Il n’est pas nécessaire de jQuery, c’est une réponse tardive, mais j’ai pensé que c’est le plus voté, je dois le préciser.

0
aXul

installez les dépendances:

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

ensuite, ajoutez des scripts dans votre 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"
    ]

puis, créez un script.js

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

maintenant redémarrez votre serveur.

0
Danilo Thiago

AngularStrap ne fonctionne pas dans IE8 avec Angularjs version 1.2.9, donc ne l'utilisez pas si votre application doit prendre en charge IE8.

0
Tron Diggy