| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 |
- <!doctype html>
- <html ng-app="720kb">
- <head>
- <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
- <link rel="stylesheet" type="text/css" href="http://720kb.github.io/csshelper/assets/ext/src/helper.css">
- <link rel="stylesheet" type="text/css" href="src/css/angular-tooltips.css">
- <link rel="stylesheet" type="text/css" href="cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"/>
- <title>Angularjs Tooltips</title>
- </head>
- <body class="center-content" ng-controller="Ctrl">
- <div class="separator100"></div>
- <div class="col6 offset-left2">
- <div ng-repeat="item in items">
- <a tooltips tooltip-html="{{generateHTMLextra(item)}}"> item</a>
- </div>
- <div>
- With just an icon (Hover the icon) <i class="fa fa-trash-o clickable-icon" tooltips tooltip-title="title" tooltip-size="small"></i>
- <div class="separator30"></div>
- <a class="btn btn-medium bg-info color-white font-bold"
- tooltip-delay="400"
- tooltip-scroll="true"
- tooltip-content="Yeo man!"
- tooltip-view="views/index.html"
- tooltip-view-ctrl="Ctrl"
- tooltip-size="small"
- tooltip-side="left"
- tooltips
- tooltip-hide-trigger="click"
- tooltip-hide-target="tooltip"
- tooltip-title="hey!">
- Small left
- </a>
- </div>
- <div class="separator30"></div>
- <div>
- <a class="btn btn-medium bg-info color-white font-bold" tooltips tooltip-content="Yeo man!" tooltip-hide-trigger="click" tooltip-size="medium" tooltip-side="left" title="Title attr" >
- Medium left
- </a>
- </div>
- <div class="separator30"></div>
- <div>
- <a class="btn btn-medium bg-info color-white font-bold" tooltips tooltip-content="Yeo man!" tooltip-size="large" tooltip-side="left" >
- Large left
- </a>
- </div>
- <div class="separator100"></div>
- <div>
- <a class="btn btn-medium bg-info color-white font-bold" tooltips tooltip-content="Yeo man!" tooltip-size="small" tooltip-side="right" >
- Small right
- </a>
- </div>
- <div class="separator30"></div>
- <div>
- <a class="btn btn-medium bg-info color-white font-bold" tooltips tooltip-content="Yeo man!" tooltip-size="medium" tooltip-side="right" >
- Medium right
- </a>
- </div>
- <div class="separator30"></div>
- <div>
- <a class="btn btn-medium bg-info color-white font-bold" tooltips tooltip-content="Yeo man!" tooltip-size="large" tooltip-side="right" >
- Large right
- </a>
- </div>
- <div class="separator100"></div>
- <div>
- <a class="btn btn-medium bg-info color-white font-bold" tooltips tooltip-content="Yeo man!" tooltip-size="small" tooltip-side="top" >
- Small top
- </a>
- </div>
- <div class="separator30"></div>
- <div>
- <a class="btn btn-medium bg-info color-white font-bold" tooltips tooltip-content="Yeo man!" tooltip-size="medium" tooltip-side="top" >
- Medium top
- </a>
- </div>
- <div class="separator30"></div>
- <div>
- <a class="btn btn-medium bg-info color-white font-bold" tooltips tooltip-content="Yeo man!" tooltip-size="large" tooltip-side="top" >
- Large top
- </a>
- </div>
- <div class="separator100"></div>
- <div>
- <a class="btn btn-medium bg-info color-white font-bold" tooltips tooltip-content="Yeo man!" tooltip-size="small" tooltip-side="bottom" >
- Small bottom
- </a>
- </div>
- <div class="separator30"></div>
- <div>
- <a class="btn btn-medium bg-info color-white font-bold" tooltips tooltip-content="Yeo man!" tooltip-size="medium" tooltip-side="bottom" >
- Medium bottom
- </a>
- </div>
- <div class="separator30"></div>
- <div>
- <a class="btn btn-medium bg-info color-white font-bold" tooltips tooltip-content="Yeo man!" tooltip-size="large" tooltip-side="bottom" >
- Large bottom
- </a>
- </div>
- <div class="separator100"></div>
- <div class="separator30"></div>
- <div>
- <a class="btn btn-medium bg-info color-white font-bold" tooltips tooltip-content="Yeo man!" tooltip-show-trigger="mouseover click" tooltip-hide-trigger="click" tooltip-close-button='<button type="button">Close Me!</button>' tooltip-side="top">
- Close button: hover to open, click to close
- </a>
- </div>
- <div class="separator30"></div>
- <div>
- <a class="btn btn-medium bg-info color-white font-bold" tooltips tooltip-content="Yeo man! I have some more to say to show the positioning of the close button" tooltip-show-trigger="click" tooltip-hide-trigger="click" tooltip-close-button='<button type="button">Close Me!</button>' tooltip-side="bottom">
- Close button: click to open and close
- </a>
- </div>
- <div class="separator30"></div>
- <div>
- <a class="btn btn-medium bg-info color-white font-bold"
- tooltips
- tooltip-delay="400"
- tooltip-scroll="true"
- tooltip-content="Yeo man!"
- tooltip-size="large"
- tooltip-hide-trigger="click"
- tooltip-hide-target="tooltip"
- tooltip-title="Click tooltip to hide tooltip">
- Hide Target = tooltip
- </a>
- </div>
- <div class="separator100"></div>
- <div style="height:300px; overflow-y:scroll">
- <div style="height:600px;">
- <a class="btn btn-medium bg-info color-white font-bold" tooltips tooltip-scroll="true" tooltip-content="Yeo man!" tooltip-hide-trigger="click" tooltip-size="medium" tooltip-side="left" title="Title attr">
- Scrollable
- </a>
- </div>
- </div>
- </div>
- <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
- <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.min.js"></script>
- <script type="text/javascript" src="src/js/angular-tooltips.js"></script>
- <script type="text/javascript" src="assets/js/index.js"></script>
- </body>
- </html>
|
