xos-apps/auto-scale/gui/src/vendor/ui.bootstrap/src/tooltip/docs/demo.html

<div ng-controller="TooltipDemoCtrl">
    <div class="form-group">
      <label>Dynamic Tooltip Text</label>
      <input type="text" ng-model="dynamicTooltipText" class="form-control">
    </div>
    <div class="form-group">
      <label>Dynamic Tooltip Popup Text</label>
      <input type="text" ng-model="dynamicTooltip" class="form-control">
    </div>
    <p>
      Pellentesque <a href="#" uib-tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
      sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
      aliquam. Tincidunt lobortis feugiat vivamus at
      <a href="#" tooltip-placement="left" uib-tooltip="On the Left!">left</a> eget
      arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
      <a href="#" tooltip-placement="right" uib-tooltip="On the Right!">right</a>
      nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
      <a href="#" tooltip-placement="bottom" uib-tooltip="On the Bottom!">bottom</a>
      pharetra convallis posuere morbi leo urna,
      <a href="#" tooltip-animation="false" uib-tooltip="I don't fade. :-(">fading</a>
      at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
      <a href="#" tooltip-popup-delay='1000' uib-tooltip='appears with delay'>show delay</a>
      turpis massa tincidunt dui ut. In cursus
      <a href="#" tooltip-popup-close-delay='1000' uib-tooltip='hides with delay'>hide delay</a>
      <a href="#" uib-tooltip-template="'myTooltipTemplate.html'">Custom template</a>
      nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
    </p>

    <p>
        I can even contain HTML. <a href="#" uib-tooltip-html="htmlTooltip">Check me out!</a>
    </p>

    <p>
        <style>
            /* Specify styling for tooltip contents */
            .tooltip.customClass .tooltip-inner {
                color: #880000;
                background-color: #ffff66;
                box-shadow: 0 6px 12px rgba(0,0,0,.175);
            }
            /* Hide arrow */
            .tooltip.customClass .tooltip-arrow {
                display: none;
            }
        </style>
        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>
    </p>

    <form role="form">
      <div class="form-group">
        <label>Or use custom triggers, like focus: </label>
        <input type="text" value="Click me!" uib-tooltip="See? Now click away..." tooltip-trigger="focus" tooltip-placement="right" class="form-control" />
      </div>

      <div class="form-group" ng-class="{'has-error' : !inputModel}">
        <label>Disable tooltips conditionally:</label>
        <input type="text" ng-model="inputModel" class="form-control"
          placeholder="Hover over this for a tooltip until this is filled"
          uib-tooltip="Enter something in this input field to disable this tooltip"
          tooltip-placement="top"
          tooltip-trigger="mouseenter"
          tooltip-enable="!inputModel" />
      </div>
    </form>

    <script type="text/ng-template" id="myTooltipTemplate.html">
      <span>Special Tooltip with <strong>markup</strong> and {{ dynamicTooltipText }}</span>
    </script>
</div>