JSFiddle - React, Tailwind, and code Playground

by mslocum

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<div class="container" ng-controller="Ctrl">
    <p>Tooltip: {{ iVal1 }}
        <input type="checkbox" 
            tooltip="This is a tooltip" 
            tooltip-append-to-body="true"
            tooltip-enable="{{iVal2}}"
            ng-model="iVal1"
            ng-true-value="1"
            ng-false-value="0"
        />
    </p>
    <p>No tooltip: {{ iVal2 }}
        <input type="checkbox"
            ng-model="iVal2"
        />
    </p>
    <p>Tooltip: {{ iVal3 }}
        <input type="text" 
            tooltip="This is a tooltip {{ iVal4 }}" 
            tooltip-append-to-body="true"
            ng-model="iVal3"
        />
    </p>
    <p>No tooltip: {{ iVal4 }}
        <input type="text"
            ng-model="iVal4"
        />
    </p>
</div>

CSS

.container {
    margin: 40px 0 0;
}

JavaScript

var app = angular.module('myApp', ['ui.bootstrap']);


function Ctrl($scope)
{
    $scope.iVal1 = 0;
    $scope.iVal2 = 0;
    $scope.iVal3 = 0;
    $scope.iVal4 = 0;
}


/******* START CUSTOM UI-BOOTSTRAP *********/
/**
 * The following features are still outstanding: animation as a
 * function, placement as a function, inside, support for more triggers than
 * just mouse enter/leave, html tooltips, and selector delegation.
 */
angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap.bindHtml' ] )

/**
 * The $tooltip service creates tooltip- and popover-like directives as well as
 * houses global options for them.
 */
.provider( '$tooltip', function () {
  // The default options tooltip and popover.
  var defaultOptions = {
    placement: 'top',
    animation: true,
    popupDelay: 0
  };

  // Default hide triggers for each show trigger
  var triggerMap = {
    'mouseenter': 'mouseleave',
    'click': 'click',
    'focus': 'blur'
  };

  // The options specified to the provider globally.
  var globalOptions = {};

  /**
   * `options({})` allows global configuration of all tooltips in the
   * application.
   *
   *   var app = angular.module( 'App', ['ui.bootstrap.tooltip'], function( $tooltipProvider ) {
   *     // place tooltips left instead of top by default
   *     $tooltipProvider.options( { placement: 'left' } );
   *   });
   */
	this.options = function( value ) {
		angular.extend( globalOptions, value );
	};

  /**
   * This allows you to extend the set of trigger mappings available. E.g.:
   *
   *   $tooltipProvider.setTriggers( 'openTrigger': 'closeTrigger' );
   */
  this.setTriggers = function setTriggers ( triggers ) {
    angular.extend( triggerMap, triggers );
  };

  /**
   * This is a helper function for translating camel-case to snake-case.
   */
  function snake_case(name){
    var regexp = /[A-Z]/g;
    var separator = '-';
    return name.replace(regexp, function(letter, pos) {
      return (pos ? separator :...