Bedingte Tooltip mit Bootstrap 3 und eckigen

So kann ich Tooltips auf Feld Fokus erscheinen, aber ich möchte nur manchmal. Ich möchte einen manuellen Trigger hinzufügen, aber zu sagen, dass die Dokumente fehlen, würde bedeuten, dass einige existieren. Hier ist, was ich bisher gefunden habe (in der Quelle)Bedingte Tooltip mit Bootstrap 3 und eckigen

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

Also, wie Sie schreiben Sie eine dieser Trigger?

Quelle

2014-01-17 boatcoder

_ „Ich möchte ein manueller Auslöser hinzufügen ..“ _ - Was genau meinst du damit? Was versuchst du zu erreichen? – Stewie

Ich möchte nur Tooltips, wenn das Feld einen Fehler hat. Gerade jetzt können Sie auf Fokus, Klick usw. auslösen. Und sie sprechen über einen manuellen Auslöser. Ich will nur wissen, wie das geht. – boatcoder

Ich denke, dass Sie sich diese Frage ansehen möchten: [Aktivieren Sie angular-ui Tooltip für benutzerdefinierte Ereignisse] (http://StackOverflow.com/questions/16651227/enable-angular-ui-tooltip-on-custom-events/ 16653079 # 16653079). – Stewie

Wenn Sie noch nach einer Lösung suchen, kann es hilfreich sein zu wissen, dass die Tooltips nur angezeigt werden, wenn es einen Textwert gibt, sonst werden sie nicht angezeigt.

Ich selbst benutze die Popover-Anweisung, hier ist ein Plotter, wo Sie Ihren Text bearbeiten können. Wenn Sie das Feld löschen, wird die QuickInfo nicht angezeigt.

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>

Und in der Steuerung legen Sie einfach den Fehler Anfangswert. Stellen Sie sicher, dass Sie "ui.bootstrap" als Abhängigkeit für Ihre App verwenden, da dies sonst nicht funktioniert.

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

app.controller('MainCtrl', function($scope) { 
    $scope.error = 'Something went wrong'; 
});

Quelle

2015-04-17 09:39:36 David

AngularJS 1.5.7 und 3.3.6 Bootstrap-Unterstützung UIB- Tooltip-HTML-Eigenschaften auf Eingabe, Auswahl und TextArea- Elemente. Im Gegensatz zu den uib-tooltip-Eigenschaften unterstützen uib-tooltip-html-Eigenschaften Ausdrücke. Sie sollten Ihre Bedingungen darin ausdrücken können.

Zum Beispiel ist hier ein Geburtsdatum Textbox mit einem Ausdruck, dass entweder Namen das Feld, wenn gültig oder den Validierungsfehler erklärt:

<input id="dateOfBirth{{::vm.studentID}}" 
 
\t \t \t name="dateOfBirth" 
 
\t \t \t placeholder="Date of Birth" 
 
\t \t \t uib-tooltip-html="myFormName.dateOfBirth.$valid ? 'Date of Birth' : myFormName.dateOfBirth.$error.required ? 'Date of Birth is required' : 'Date of Birth is not a valid date: mm/dd/yyyy'" 
 
\t \t \t type="date" 
 
\t \t \t class="form-control" 
 
\t \t \t data-ng-model="vm.dateOfBirth" 
 
\t \t \t data-ng-required="vm.editMode" 
 
\t \t \t min="1920-01-01" 
 
\t \t \t data-ng-max="vm.maxDateOfBirth" 
 
\t \t \t tabindex="3" />

Mit ein wenig mehr Arbeit konnte man Erklären Sie auch die minimalen und maximalen Datumsfehler.

Quelle

2016-09-01 22:43:36 CAK2

<label> 
    Open tooltips <span uib-tooltip="Hello!" tooltip-is-open="tooltipIsOpen" tooltip-placement="bottom">conditionally.</span> 
</label>

Überprüfen Sie den Tooltip Teil des API doc

Quelle

2017-08-02 06:03:18 Kane

Dies ist eine vernünftige Empfehlung. Aber wenn es eine tatsächliche Antwort im Inneren gibt, dann müssen Sie ein wenig ausarbeiten, um das deutlicher zu machen. Z.B. erklären, was das Code-Fragment erreicht und wie. Wie es jetzt ist, ist es kurz davor, als "keine Antwort" gekennzeichnet zu werden. Bitte nehmen Sie auch die [Tour]. – Yunnosch

Bedingte Tooltip mit Bootstrap 3 und eckigen

Antwort

Verwandte Themen