bootstrap tooltips在 angularJS中的使用方法


Posted in Javascript onApril 10, 2019

使用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中的使用方法

设置颜色后

bootstrap tooltips在 angularJS中的使用方法

总结

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

Javascript 相关文章推荐
javascript读取xml
Nov 04 Javascript
jscript之List Excel Color Values
Jun 13 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
javascript判断一个变量是数组还是对象
Apr 10 #Javascript
Angular CLI 使用教程指南参考小结
Apr 10 #Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 #Javascript
element-ui多文件上传的实现示例
Apr 10 #Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 #Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 #Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 #Javascript
You might like
php数据库连接
2006/10/09 PHP
PHP学习之整理字符串
2011/04/17 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
学习jquery之一
2007/04/27 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
内部类的定义、种类以及优点
2013/10/16 面试题
小学教师的个人自我鉴定
2013/10/26 职场文书
电气专业应届生求职信
2013/11/01 职场文书
护理专科毕业推荐信
2013/11/10 职场文书
岗位职责的定义
2013/11/10 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
关于保护环境的建议书
2014/05/13 职场文书
初婚初育证明范本
2014/11/24 职场文书
同意离婚答辩状
2015/05/22 职场文书
婚礼答谢词范文
2015/09/29 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers
Nginx 常用配置
2022/05/15 Servers