twitter-bootstrap 当角度输入有错误时,在焦点上显示 Bootstrap 工具提示

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18107986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 17:51:52  来源:igfitidea点击:

Show Bootstrap tooltip on focus when an angular input has an error

twitter-bootstrapangularjsangular-ui-bootstrap

提问by Cotten

This example is taken from angularjs's docs

此示例取自angularjs 的文档

<form name="myForm" ng-controller="Ctrl">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span>
</form>

I want to achieve the same behavior but with a Bootstrap tooltip. I've looked at the Angular UI-Bootstraped project (http://angular-ui.github.io/bootstrap/) but can't figure out how to do this.

我想实现相同的行为,但使用 Bootstrap 工具提示。我查看了 Angular UI-Bootstraped 项目(http://angular-ui.github.io/bootstrap/),但不知道如何做到这一点。

Something like:

就像是:

<input type="text" value="Click me!"
    tooltip="See? Now click away..." 
    tooltip-trigger="focus"
    tooltip-placement="right"
    tooltip-enabled="myForm.input.$error.required"   <--- pseudo code
    />

回答by Rasalom

I've tried several ways, looks like you only can modify source code from angular-bootstrap to get a proper solution. But. There is a 'hacky' solution, maybe it'll help you or even that's what you needed(examples from angular-bootstrap and angular-input combined):

我尝试了几种方法,看起来您只能从 angular-bootstrap 修改源代码以获得正确的解决方案。但。有一个 'hacky' 解决方案,也许它会帮助你,甚至这就是你所需要的(来自 angular-bootstrap 和 angular-input 的例子):

<form name="myForm" class="my-form">
  userType: <input style="width: 50px;" name="input" ng-model="userType" required value="Click me!" tooltip="{{myForm.$valid ? '' : 'See? Now click away...'}}"  tooltip-trigger="focus" tooltip-placement="right" class="form-control">
  <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
  <tt>userType = {{userType}}</tt><br>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
 </form>

same in plunker.

在 plunker 中也一样。

basically here you just remove text from tooltip and it hides.

基本上在这里您只需从工具提示中删除文本并将其隐藏。