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 相关文章推荐
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
vue数组对象排序的实现代码
Jun 20 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
js实现弹窗猜数字游戏
Nov 26 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 代码优化的42条建议 推荐
2009/09/25 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
Python简单连接MongoDB数据库的方法
2016/03/15 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
给学校的建议书
2014/03/12 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
公司建议书怎么写
2014/05/15 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
2014年财务科工作总结
2014/11/11 职场文书
2014年技术员工作总结
2014/11/18 职场文书
环保建议书作文400字
2015/09/14 职场文书
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python