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"
            ng-model="iVal1"
            ng-true-value="1"
            ng-false-value="0"
        />
    </p>
    <p>No tooltip: {{ iVal2 }}
        <input type="checkbox"
            ng-model="iVal2"
            ng-true-value="1"
            ng-false-value="0"
        />
    </p>
    <p>Tooltip: {{ iVal3 }}
        <input type="text" 
            tooltip="This is a tooltip" 
            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;
}