AngularJs的UI组件ui-Bootstrap-Tooltip

时间：2021-11-26 08:46:08

完整案例，参考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>

相关文章