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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
JS出现失效的情况总结
Jan 20 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 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 字符串替换的方法
2012/01/10 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
js输出列表实现代码
2010/09/12 Javascript
用js实现in_array的方法
2013/11/05 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
在Python的Django框架中包装视图函数
2015/07/20 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
财务工作者先进事迹材料
2014/01/17 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
银行委托书范本
2014/09/28 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android