bootstrap tooltips在 angularJS中的使用方法

使用bootstrap自带的提示控件，省去了不少事情

<div class="s2" ng-init="InitTooltip()">
  <input type="text" ng-pattern="/^(http|https|ftp)\://[a-zA-Z0-9\.\,\?\'\\/\+&%\$\#\=~:_\-\s@]+$/" class="inputwords" id="txtExamination" name="txtExamination" ng-model="csInfo.ExamUrl" placeholder="测验地址">
  <span data-toggle="tooltip" data-placement="top" data-html="true" title="1、点击《新建测验》按钮 <br/> 2、测验创建完成后，点击页面右上角《共享》按钮>点击《复制》按钮 <br/> 3、把复制的url粘贴到此处即可" style="cursor: pointer;">
   <i class="fa fa-question-circle-o examSpan"></i>
  </span>
  <span style="margin-left: 88px; width: 8px;"> <a target="_blank" href="https://forms.office.com/Pages/DesignPage.aspx">创建测验</a></span>
</div>

控制器或者js代码：

    $scope.InitTooltip = function() {
      //初始化tips提示控件
      $("[data-toggle='tooltip']").tooltip();
    };

控制颜色，类名是生成弹出层后的类名：

/**控制弹出层颜色和大小*/
.tooltip-inner {
  background: #fafafa !important;
  text-align: left !important;
  color: #363636 !important;
  border: 1px solid #dedede;
  max-width: 400px !important;
  padding: 4px;
}

/**控制小三角透明度*/
.tooltip-arrow{
  border-bottom-color: #ffffff !important;
  opacity: 0.3;
}

默认背景颜色

设置颜色后

总结

以上所述是小编给大家介绍的bootstrap tooltips在 angularJS中的使用方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • AngularJs+Bootstrap实现漂亮的计算器

    AngularJs+Bootstrap实现漂亮的计算器

    之前看到一个试题,要求用angularJs和Bootstrap写一个简单的计算器,通过百度,发现没有什么好的例子,所以呢,我就把自己写的一个例子发出来给大家.(大牛勿喷) HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <me

  • Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能

    Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能

    最终实现效果: index.html <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animat

  • AngularJs中Bootstrap3 datetimepicker使用实例

    AngularJs中Bootstrap3 datetimepicker使用实例

    关于datetimepicker的使用,参考:http://www.jb51.net/article/99896.htm 在AngularJs中使用实例: HTML代码: <div class="container" ng-app="myApp" ng-controller="myCtrl"> <div class="row"> <div class='col-sm-6'> <div

  • Spring Boot+AngularJS+BootStrap实现进度条示例代码

    Spring Boot+AngularJS+BootStrap实现进度条 原理 进度条的原理是在上传文件的时候,当程序运行到某一个部分,往Session中设置一个1到100的值.然后前台再每隔很小的一段时间去请求这个值. 在AngularJS中,$http对象有3种状态,分别是success,progress,error,其中progress方法就会在success方法调用之前(也就是上传完成之前),不断地调用.而我们要做的就是在progress中在添加一个请求,去后台拿我们设置在session

  • Angularjs中的ui-bootstrap的使用教程

    Angularjs中的ui-bootstrap的使用教程

    1.新建uiBootstrap.html页面,引入依赖的js和css类库 2.新建uiBootstrap.js文件,定义一个uiModule 模块,引入依赖的模块 /** * Created by zhong on 2015/9/7. */ var uiModule = angular.module("uiModule",["ui.bootstrap","ui.router"]); }); 3.定义dialog弹出窗口的模板 4.定义一个 UiC

  • AngularJS+Bootstrap实现多文件上传与管理

    AngularJS+Bootstrap实现多文件上传与管理

    最近一个项目中需要实现多文件上传与管理,而项目是基于bootstrap开发的,所以查了一些bootstrap文件上传插件,最后发现还是bootstrap-fileinput最美观,该插件可以实现多文件的上传与管理(插件官方地址:http://plugins.krajee.com/file-input),具体的效果如下: (bootstrap-fileinput不局限于图片上传,也可以实现文件上传,但图片的缩略图容易辨识,这里就以图片上传为例) 该插件基本的操作可以参考:JS文件上传神器boots

  • bootstrap tooltips在 angularJS中的使用方法

    使用bootstrap自带的提示控件,省去了不少事情 <div class="s2" ng-init="InitTooltip()"> <input type="text" ng-pattern="/^(http|https|ftp)\://[a-zA-Z0-9\.\,\?\'\\/\+&%\$\#\=~:_\-\s@]+$/" class="inputwords" id=&quo

  • angularjs中的$eval方法详解

    在controller中定义了一个变量 $scope.a_1 = "abc"; 想在view里面动态输出,因为这个数字是动态的,这么输出肯定是不行的{{'a_' + '1'}},因为输出来的是a_1这个字符串,而不是a_1这个变量的值 想输出a_1这个变量的值,可以使用$eval方法:{{$eval('a_' + '1')}} $eval是作为scope的方法来使用的,在controller中使用的话,是这么使用:$scope.$eval() 以上这篇angularjs中的$eval方

  • 使用AngularJS中的SCE来防止XSS攻击的方法

    使用AngularJS中的SCE来防止XSS攻击的方法

    这篇文章展示了有关XSS(跨站脚本)的不同方案以及怎样使用AngularJS中SCE($sceProvider),sanitize service这些特性来正确处理XSS.如果我遗漏了什么重要的地方请直接评论/建议.同时,错别字请见谅. 以下几点内容将是我接下来要讲述的重点: 全部转码HTML 安全插入HTML的同时忽略类似"script"这样的标签.如果不加以注意,这将一样存在风险同时也会丑化页面,尤其是在有"img"标签的时候. 依赖并插入纯HTML:这也有风险

  • AngularJS使用angular.bootstrap完成模块手动加载的方法分析

    本文实例分析了AngularJS使用angular.bootstrap完成模块手动加载的方法.分享给大家供大家参考,具体如下: 之前我们看到使用ng-app指令,可以实现模块的自动加载.现在我们看下,angular中如何手动加载模块.需要使用到angular.bootstrap这个函数. <html> <head> <script src="angular.js"></script> <script> // 创建moudle1

  • AngularJS中ng-options实现下拉列表的数据绑定方法

    下拉列表的简单使用 ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值: 另一个是ng-options用于确定下拉列表的元素数组. <select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select> 上面这条语句就是把选择

  • Angularjs中使用指令绑定点击事件的方法

    项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> <li class=""> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external n

  • 详解AngularJS中$http缓存以及处理多个$http请求的方法

    $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据.在AngularJS的实际项目中,经常需要处理多个$http请求,每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去. 1.处理多个$http请求 angular.module('app',[]) .controller('AppCtrl', function AppCtrl(myService){ var app = this; myService.

  • AngularJS中监视Scope变量以及外部调用Scope方法

    在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> <button id="jQBtn">jQ Button</button> </div> <div id="ngSection" ng-controller="NGCtrl"> <input typ

  • AngularJs中route的使用方法和配置

    angular是Google开发的一个单页面应用框架,是现在比较主流的单页面应用框架之一.该强大的地方有很多,比如双向数据绑定,应用了后端的MVC模式到前端,自定义指令等. 既然是单页面应用,肯定离不开页面的切换.我们首先来说一下angular的路由. angular实现页面切换时用了route. <script src="js/plugins/angular/angular.min.js"></script> <script src="js/p

  • AngularJS中控制器函数的定义与使用方法示例

    AngularJS中控制器函数的定义与使用方法示例

    本文实例讲述了AngularJS中控制器函数的定义与使用方法.分享给大家供大家参考,具体如下: HTML正文: <body ng-app="myApp" ng-controller="myCtrl"> <h2>AngularJS函数绑定</h2> <textarea ng-model="message" cols="40" rows="10"></tex

随机推荐