AngularJs的UI组件ui-Bootstrap-Tooltip
完整案例，参考http://www.cnblogs.com/pilixiami/p/5661600.html
<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/Content/bootstrap.css" rel="stylesheet" />
<title></title> <script src="/Scripts/angular.js"></script>
<script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
<script> angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('TooltipDemoCtrl', function ($scope, $sce) {
$scope.htmlTooltip = $sce.trustAsHtml('代码示例 <code>id:5</code>'); $scope.text = "一些文本";
});
</script>
<script type="text/ng-template" id="myTooltipTemplate.html">
<div>使用模板的提示框<strong>markup</strong>{{ text }}</div>
</script>
</head>
<body style="padding:30px">
<div ng-controller="TooltipDemoCtrl">
<div class="form-group"><button tooltip-placement="right" uib-tooltip="文本提示框" type="button" class="btn btn-default">按钮</button></div>
<div class="form-group"><a href="#" uib-tooltip-html="htmlTooltip">使用html的提示框</a></div>
<div class="form-group"><input type="text" uib-tooltip-template="'myTooltipTemplate.html'" value="模板提示框"/></div>
</div>
</body>
</html>
AngularJs的UI组件ui-Bootstrap-Tooltip的更多相关文章
- Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu
1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...
- Ionic4.x 中的 UI 组件(UI Components) 日期组件
1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...
- Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件
Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...
- Ionic4.x 中的 UI 组件(UI Components)表单相关组件
1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...
- 挂号平台首页开发（UI组件部分）
JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...
- AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover
tooltip和popover是轻量的.可扩展的.用于提示的指令.对于移动端来讲,这两个指令虽然可以正常工作,但是从用户体验的角度并不推荐使用. 先说tooltip,tooltip有三种使用方式: ( ...
- AngularJs的UI组件ui-Bootstrap分享（一）
最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...
- AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel
Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...
- AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar
进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条.第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条. 这 ...
- AngularJs的UI组件ui-Bootstrap分享（十二）——Rating
Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...
随机推荐
- ashx文件的使用
转自:http://www.cnblogs.com/Tally/archive/2013/02/19/2916499.html ashx是什么文件 .ashx 文件用于写web handler的..a ...
- 滚动轮播插件——jCarouselLite
jcarousellite(上下.水平滚动元素插件)插件使用: 参数说明: btnPrev string 上一个按钮的class名, 比如 btnPrev: ".prev" ...
- 理解I/O Completion Port
欢迎阅读此篇IOCP教程.我将先给出IOCP的定义然后给出它的实现方法,最后剖析一个Echo程序来为您拨开IOCP的谜云,除去你心中对IOCP的烦恼.OK,但我不能保证你明白IOCP的一切,但我会尽我 ...
- ARM学习笔记7——乘法指令
ARM乘法指令完成两个数据的乘法,两个32位二进制数相乘的结果是64位的4积. 其中: 1.“RadHi:RdLo”是由RdHi(最高有效32位)和RdLo(最低有效32位)链接形成的64位数,“[3 ...
- extjs的button控件fireEvent('click')无效问题
extjs的button控件fireEvent('click')无效问题 2012-06-06 16:39 891人阅读 评论(0) 收藏 举报 extjsbuttoncallbackfunction ...
- linux 多线程基础4
六.线程的作用域 函数pthread_attr_setscope和pthread_attr_getscope分别用来设置和得到线程的作用域,这两个函数的定义如下: 7． 名称:: pthread_at ...
- （DT系列五）Linux kernel 是怎么将 devicetree中的内容生成plateform_device
Linux kernel 是怎么将 devicetree中的内容生成plateform_device 1,实现场景(以Versatile Express V2M为例说明其过程)以arch/arm/ma ...
- php 修改上传文件大小
有些朋友要通过自己的网站后台,包括论坛,来上传一些文件,php一般为2m,或8m(以下我们按默认为2m),接下来就是来讲怎么修改上传文件大小的. 1.首先修改执行上传文件限制 一般的文件上传,除非文件 ...
- C#如何将线程中的代码抛到主线程去执行
private SynchronizationContext mainThreadSynContext; //主线程 mainThreadSynContext = new WindowsFormsSy ...
- hdoj 1166 敌兵布阵【线段树求区间最大值+单点更新】
敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...