通过javascript显示和隐藏bootsrap工具提示

我有一个使用ui.bootsrap工具提示功能的东西，代码运行良好，但我不知道如何通过脚本显示和隐藏工具提示，比如说我有一个表单，当我提交表单时，如果某个组件（电子邮件的文本字段）的验证失败，然后它会显示一个工具提示，除非正确验证该字段，否则它不应进入

谁能告诉我一些解决方法吗

脚本

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

app.controller('MainCtrl', function ($scope) {

    $scope.validate = function () {
        var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
        var emailValid = re.test($scope.userEmail);
        if(!emailValid)
        {
            // I want to show the tool tip
        }
    };

})

html

<div ng-app="someApp" ng-controller="MainCtrl">
    <form ng-submit="validate()">
        <input type="text" ng-model='userEmail' rc-tooltip="Invalid Email...." tooltip-placement="bottom" />
        <input type="submit" />
    </form>
</div>

此处给出

通过使用javascript使用数据toggale选项，您可以使用工具提示

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

通过以上代码，您可以指定工具提示，然后显示和隐藏您可以使用的工具提示

$（'#元素'）。工具提示（'show'）

或

下面是一个使用引导的简单电子邮件验证指令：

app.directive('email', function() {
  return  {
    restrict: 'A',
    require: 'ngModel',
    compile: function(element, attr) {
      element.tooltip({ placement: 'right', title:'Email is invalid', trigger:'manual'});
      function emailValid(email) {

        var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
         var valid = re.test(email);
         return valid;

      }
      return  function(scope, element,attr, ngModel) {
          ngModel.$validators.email = function(val) {
            return emailValid(val);
          }

          scope.$watch(function() {
            return ngModel.$error.email;
          }, function(val) {
            if (val)
               element.tooltip('show');
            else
               element.tooltip('hide');

          });
      }
    }
  }
});

用法

获取

$（…）。popover不是一个函数

@AlexMan在您的script@Anita我补充说，即使焦点丢失，工具提示仍然会消失。你对此有什么想法吗

app.directive('email', function() {
  return  {
    restrict: 'A',
    require: 'ngModel',
    compile: function(element, attr) {
      element.tooltip({ placement: 'right', title:'Email is invalid', trigger:'manual'});
      function emailValid(email) {

        var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
         var valid = re.test(email);
         return valid;

      }
      return  function(scope, element,attr, ngModel) {
          ngModel.$validators.email = function(val) {
            return emailValid(val);
          }

          scope.$watch(function() {
            return ngModel.$error.email;
          }, function(val) {
            if (val)
               element.tooltip('show');
            else
               element.tooltip('hide');

          });
      }
    }
  }
});

<input type="text" ng-model="email" email  />