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使用prototype定义对象类型
Feb 07 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 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 mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
php跨站攻击实例分析
2014/10/28 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
Python生成验证码实例
2014/08/21 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
python定义具名元组实例操作
2021/02/28 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
AURALog面试题软件测试方面
2013/10/22 面试题
白岩松演讲
2014/05/21 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
颐和园的导游词
2015/01/30 职场文书
物业工程部岗位职责
2015/02/11 职场文书
2015选调生工作总结
2015/07/24 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书