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 ...
随机推荐
- POJ_1065_Wooden_Sticks_(动态规划,LIS+鸽笼原理)
描述 http://poj.org/problem?id=1065 木棍有重量 w 和长度 l 两种属性,要使 l 和 w 同时单调不降,否则切割机器就要停一次,问最少停多少次(开始时停一次). Wo ...
- ecshop 模板与库文件lbi
转: 管理中心的"设置模板"其实就是把特定的[库项目]添加到模板中的[可编辑区域],或从[可编辑区域]中删除/修改某些[库项目],后台的"设置模板"只能对添加特 ...
- （转载）http_build_query用法,挺方便的
(转载)http://www.cnblogs.com/zhja/archive/2012/11/10/2764174.html http_build_query (PHP 5) http_build_ ...
- log4net封装类 zz
封装说明: 1.使用静态方法调用即可写入日志. 2.在日志信息写入之前,定义委托处理日志信息,便于记录日志信息之前,显示给用户. 3.添加代码配置Log4net,避免应用程序总是携带配置文件.如果需要 ...
- bzoj 1036 [ZJOI2008]树的统计Count（树链剖分，线段树）
1036: [ZJOI2008]树的统计Count Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 10677 Solved: 4313[Submit ...
- lightoj 1094 Farthest Nodes in a Tree 【树的直径 裸题】
1094 - Farthest Nodes in a Tree PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: ...
- 关于list、set、map的几点总结
用法: 1. 如果涉及到堆栈,队列等操作,应该考虑用List, 对于需要快速插入,删除元素,应该使用LinkedList, 如果需要快速随机访问元素,应该使用ArrayList.2. 如果程序在单线程 ...
- 5步做好vsftpd
系统:centos6.5 X86 1､yum -y install vsftpd 2､vim /etc/vsftpd/vsftpd.conf 可以用cat vsftpd.conf | grep -v ...
- svn 上传 过滤
代码上传过程中发现.so文件不能上传,查了一下,发现是svn服务器要设置上传过滤:很多文件,会被过滤掉,不能正常上传.设置如下: 通过终端打开配置文件: open ~/.subversion/conf ...
- Eclipse中修改SVN用户名和密码方法[转]
由于在svn 的界面中并没有为我们提供直接更换用户名密码的地方,所以一旦我们需要更换用户名的就需要自己想一些办法. 解决方案: 在Eclipse 使用SVN 的过程中大多数人往往习惯把访问SVN 的用 ...