Matteo Scandolo | 46b5610 | 2015-12-16 14:23:08 -0800 | [diff] [blame] | 1 | <div ng-controller="TooltipDemoCtrl"> |
| 2 | <div class="form-group"> |
| 3 | <label>Dynamic Tooltip Text</label> |
| 4 | <input type="text" ng-model="dynamicTooltipText" class="form-control"> |
| 5 | </div> |
| 6 | <div class="form-group"> |
| 7 | <label>Dynamic Tooltip Popup Text</label> |
| 8 | <input type="text" ng-model="dynamicTooltip" class="form-control"> |
| 9 | </div> |
| 10 | <p> |
| 11 | Pellentesque <a href="#" uib-tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>, |
| 12 | sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in |
| 13 | aliquam. Tincidunt lobortis feugiat vivamus at |
| 14 | <a href="#" tooltip-placement="left" uib-tooltip="On the Left!">left</a> eget |
| 15 | arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur |
| 16 | <a href="#" tooltip-placement="right" uib-tooltip="On the Right!">right</a> |
| 17 | nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas |
| 18 | <a href="#" tooltip-placement="bottom" uib-tooltip="On the Bottom!">bottom</a> |
| 19 | pharetra convallis posuere morbi leo urna, |
| 20 | <a href="#" tooltip-animation="false" uib-tooltip="I don't fade. :-(">fading</a> |
| 21 | at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus |
| 22 | <a href="#" tooltip-popup-delay='1000' uib-tooltip='appears with delay'>show delay</a> |
| 23 | turpis massa tincidunt dui ut. In cursus |
| 24 | <a href="#" tooltip-popup-close-delay='1000' uib-tooltip='hides with delay'>hide delay</a> |
| 25 | <a href="#" uib-tooltip-template="'myTooltipTemplate.html'">Custom template</a> |
| 26 | nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas |
| 27 | </p> |
| 28 | |
| 29 | <p> |
| 30 | I can even contain HTML. <a href="#" uib-tooltip-html="htmlTooltip">Check me out!</a> |
| 31 | </p> |
| 32 | |
| 33 | <p> |
| 34 | <style> |
| 35 | /* Specify styling for tooltip contents */ |
| 36 | .tooltip.customClass .tooltip-inner { |
| 37 | color: #880000; |
| 38 | background-color: #ffff66; |
| 39 | box-shadow: 0 6px 12px rgba(0,0,0,.175); |
| 40 | } |
| 41 | /* Hide arrow */ |
| 42 | .tooltip.customClass .tooltip-arrow { |
| 43 | display: none; |
| 44 | } |
| 45 | </style> |
| 46 | I can have a custom class. <a href="#" uib-tooltip="I can have a custom class applied to me!" tooltip-class="customClass">Check me out!</a> |
| 47 | </p> |
| 48 | |
| 49 | <form role="form"> |
| 50 | <div class="form-group"> |
| 51 | <label>Or use custom triggers, like focus: </label> |
| 52 | <input type="text" value="Click me!" uib-tooltip="See? Now click away..." tooltip-trigger="focus" tooltip-placement="right" class="form-control" /> |
| 53 | </div> |
| 54 | |
| 55 | <div class="form-group" ng-class="{'has-error' : !inputModel}"> |
| 56 | <label>Disable tooltips conditionally:</label> |
| 57 | <input type="text" ng-model="inputModel" class="form-control" |
| 58 | placeholder="Hover over this for a tooltip until this is filled" |
| 59 | uib-tooltip="Enter something in this input field to disable this tooltip" |
| 60 | tooltip-placement="top" |
| 61 | tooltip-trigger="mouseenter" |
| 62 | tooltip-enable="!inputModel" /> |
| 63 | </div> |
| 64 | </form> |
| 65 | |
| 66 | <script type="text/ng-template" id="myTooltipTemplate.html"> |
| 67 | <span>Special Tooltip with <strong>markup</strong> and {{ dynamicTooltipText }}</span> |
| 68 | </script> |
| 69 | </div> |