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 相关文章推荐
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
微信小程序实现多张图片上传功能
Nov 18 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 递归效率分析
2009/11/24 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
JS日历 推荐
2006/12/03 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
Seajs的学习笔记
2014/03/04 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
Python中的is和id用法分析
2015/01/26 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
美国性感女装网站:bebe
2017/03/04 全球购物
人力资源专员岗位职责
2014/01/30 职场文书
《灯光》教学反思
2014/02/08 职场文书
广播体操比赛口号
2014/06/10 职场文书
趣味运动会标语口号
2015/12/26 职场文书
详解Spring事件发布与监听机制
2021/06/30 Java/Android
MySQL创建管理KEY分区
2022/04/13 MySQL