经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » AngularJS » 查看文章
bootstrap tooltips在 angularJS中的使用方法
来源:jb51  时间:2019/4/11 8:46:14  对本文有异议

使用bootstrap自带的提示控件,省去了不少事情

  1. <div class="s2" ng-init="InitTooltip()">
  2. <input type="text" ng-pattern="/^(http|https|ftp)\://[a-zA-Z0-9\.\,\?\'\\/\+&%\$\#\=~:_\-\s@]+$/" class="inputwords" id="txtExamination" name="txtExamination" ng-model="csInfo.ExamUrl" placeholder="测验地址">
  3. <span data-toggle="tooltip" data-placement="top" data-html="true" title="1、点击《新建测验》按钮 <br/> 2、测验创建完成后,点击页面右上角《共享》按钮>点击《复制》按钮 <br/> 3、把复制的url粘贴到此处即可" style="cursor: pointer;">
  4. <i class="fa fa-question-circle-o examSpan"></i>
  5. </span>
  6. <span style="margin-left: 88px; width: 8px;"> <a target="_blank" href="https://forms.office.com/Pages/DesignPage.aspx">创建测验</a></span>
  7. </div>

控制器或者js代码:

  1. $scope.InitTooltip = function() {
  2. //初始化tips提示控件
  3. $("[data-toggle='tooltip']").tooltip();
  4. };

控制颜色,类名是生成弹出层后的类名:

  1. /**控制弹出层颜色和大小*/
  2. .tooltip-inner {
  3. background: #fafafa !important;
  4. text-align: left !important;
  5. color: #363636 !important;
  6. border: 1px solid #dedede;
  7. max-width: 400px !important;
  8. padding: 4px;
  9. }
  10.  
  11. /**控制小三角透明度*/
  12. .tooltip-arrow{
  13. border-bottom-color: #ffffff !important;
  14. opacity: 0.3;
  15. }

默认背景颜色

设置颜色后

总结

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号