JSFiddle - React, Tailwind, and code Playground

by t4gedieb

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
<div class="ng-cloak" ng-app="test-me">
    <div class="page-header">
         <h1>
             <span tooltip-trigger="click" tooltip-placement="bottom" tooltip="On the Bottom">Contactlist</span>
         </h1>
    </div>
    <div><span tooltip-trigger="click" tooltip-placement="bottom" tooltip="On the ">open me</span></div>
    <div ng-click="collapse = !collapse">toggle</div>
    <div class="sample-show-hide" ng-show="collapse">here i am</div>
    <div class="sample-show-hide" ng-class="{in : collapse, fade : collapse}">here i am 2 ({{collapse}})</div>
</div>

CSS

.sample-show-hide {
    padding:10px;
    border:1px solid black;
    background:white;
}
.sample-show-hide {
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
}
.sample-show-hide.ng-hide {
    opacity:0;
}

JavaScript

console.log('load');
    angular.module("template/tooltip/tooltip-popup.html", []).run(["$templateCache", function($templateCache) {
        $templateCache.put("template/tooltip/tooltip-popup.html",
                           "<section style='position: absolute'><div class=\"tooltip {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +        
          "  <div class=\"tooltip-arrow\"></div>\n" +
          "  <div class=\"tooltip-inner\" ng-bind=\"content\"></div>\n" +
          "</div></section>\n" +
          "");
      }]);    
angular.module('test-me', ['ngAnimate', 'ui.bootstrap']);
console.log('end');