Info-bulle conditionnelle avec Bootstrap 3 et angulaire

Afin que je puisse obtenir les info-bulles apparaissent sur le terrain de la focus, mais je veux seulement eux parfois. Je veux ajouter un déclencheur manuel, mais de là à dire que les documents font défaut serait d'indiquer que certains existent. Voici ce que j'ai trouvé jusqu'à présent (à la source)

//Default hide triggers for each show trigger
var triggerMap = {
  'mouseenter': 'mouseleave',
  'click': 'click',
  'focus': 'blur'
};

...

/**
 * This allows you to extend the set of trigger mappings available. E.g.:
 *
 *   $tooltipProvider.setTriggers( 'openTrigger': 'closeTrigger' );
 */
this.setTriggers = function setTriggers ( triggers ) {
  angular.extend( triggerMap, triggers );
};

Alors, comment écrivez-vous un de ces déclencheurs?

source d'informationauteur boatcoder

  1. 6

    si vous êtes toujours à la recherche d'une solution, il peut être utile de savoir que les info-bulles afficher uniquement lorsqu'il existe une valeur de textesinon, ils ne sont pas réellement montrer.

    J'utilise moi-même la liste de la directive, voici une plunker où vous pouvez modifier votre texte. Lorsque vous désactivez le champ, l'info-bulle de ne pas s'afficher.

    http://plnkr.co/edit/Zdkyhc90qTZFzLEwtrVL?p=preview

    <body ng-controller="MainCtrl">
  <br/><br/>
  <input type="text" size="100" ng-model="error"/><br/><br/>
  <p class="btn btn-default" 
     popover="{{error}}" 
     popover-placement="right" 
     popover-trigger="mouseenter">Hover my error!</p>
</body>

    Et dans le contrôleur que vous venez de définir l'erreur initiale de la valeur. Assurez-vous d'inclure " l'interface utilisateur.bootstrap " comme une dépendance de votre application, sinon ça ne marchera pas.

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

app.controller('MainCtrl', function($scope) {
  $scope.error = 'Something went wrong';
});
  2. 1
    <label>
    Open tooltips <span uib-tooltip="Hello!" tooltip-is-open="tooltipIsOpen" tooltip-placement="bottom">conditionally.</span>
</label>

    Vérifier l'info-bulle partie de la Doc API