完整案例，参考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的更多相关文章

  1. Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu

    1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...

  2. Ionic4.x 中的 UI 组件(UI Components) 日期组件

    1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...

  3. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  4. Ionic4.x 中的 UI 组件(UI Components)表单相关组件

    1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...

  5. 挂号平台首页开发（UI组件部分）

    JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...

  6. AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover

    tooltip和popover是轻量的.可扩展的.用于提示的指令.对于移动端来讲,这两个指令虽然可以正常工作,但是从用户体验的角度并不推荐使用. 先说tooltip,tooltip有三种使用方式: ( ...

  7. AngularJs的UI组件ui-Bootstrap分享（一）

    最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...

  8. AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

    Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

  9. AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

    进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条.第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条. 这 ...

  10. AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

    Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...

随机推荐

  1. Unity3D与iOS消息交互方法(1)--iOS接收Unity3D发出的消息

    跨平台这种事情不管多NB, 总要有些与原生系统交互的方法, 比如  Unity3D与iOS消息交互方法. 一: 建立一个空的Unity工程. File -->  New Project 二: 编 ...

  2. GeoServer基础教程（一）：环境搭建篇

    转自:http://imxz.me/tech/3sdev/installation-of-geoserver.html GeoServer的是一个基于Java的软件,它允许用户查看和编辑地理空间数据, ...

  3. HDOJ --- 1160

    FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  4. 逐行返回http响应的内容

    前言 问题:1.什么是特殊字符? 2.为什么要处理特殊字符? 答:特殊字符指相对于传统或常用的符号外,使用频率较少字符且难以直接输入的符号,比如数学符号:单位符号:制表符等 有些符号在URL中是不能直 ...

  5. php中的variables_order

    PHP中的$_ENV是一个包含服务器端环境变量的数组.它是PHP中一个超级全局变量,我们可以在PHP 程序的任何地方直接访问它.     $_ENV只是被动的接受服务器端的环境变量并把它们转换为数组元 ...

  6. Bzoj 3289: Mato的文件管理 莫队,树状数组,逆序对,离散化,分块

    3289: Mato的文件管理 Time Limit: 40 Sec  Memory Limit: 128 MBSubmit: 1539  Solved: 665[Submit][Status][Di ...

  7. usaco 奶牛集会 && 奶牛抗议

    奶牛集会 Description 约翰家的N头奶牛每年都会参加“哞哞大会” .哞哞大会是世界奶牛界的盛事.集会上 的活动很多,比如堆干草,跨栅栏,摸牛仔的屁股等等.当然,哞哞大叫肯定也包括在内. 奶牛 ...

  8. Installing Windows Identity Foundation on Windows 8 - The Certificate for the signer of the message is invalid or not found.

    Just a very quick note here, in case you’re struggling to get Windows Identity Foundation installed ...

  9. Linux下Nginx的安装、升级及动态添加模块

    系统基于ubuntu server 14.04.4 amd64 安装 第一步 下载并解压Nginx压缩包 从Nginx官网下载Nginx,或者在Linux上执行wget http://nginx.or ...

  10. ABAP SAPGUI_PROGRESS_INDICATOR 显示数据处理进度

    ABAP处理的数据量较大时,盯着一动不动的选择屏幕是不是很无聊?? LOOP AT I_TAB. DESCRIBE TABLE I_TAB[] LINES L_LIN. L_PERC = SY-TAB ...