sglanzer-deprecated · May 30, 2017 13:43 · May 30, 2017
diff --git a/components.my-component.js b/components.my-component.js
@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+});
diff --git a/controllers.application.js b/controllers.application.js
@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  appName: 'Ember Twiddle'
+});
diff --git a/styles.app.css b/styles.app.css
@@ -0,0 +1,28 @@
+body {
+  margin: 12px 16px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 12pt;
+}
+
+.button {
+  width: 100px;
+  height: 30px;
+  background-color: red;
+  position: relative;
+}
+
+.tooltip {
+  position: absolute;
+  opacity: 0;
+  transition: right .3s;
+  right: 0;
+}
+
+.button:focus {
+  outline: 5px solid green;
+}
+
+.button:hover .tooltip {
+  opacity: 1;
+  right: -100px;
+}
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -0,0 +1,6 @@
+<h1>Welcome to {{appName}}</h1>
+<br>
+<br>
+{{my-component}}
+<br>
+<br>
diff --git a/templates.components.my-component.hbs b/templates.components.my-component.hbs
@@ -0,0 +1,5 @@
+<button class='button'>
+	<div class='tooltip'>
+  	I'm a tooltip
+  </div>
+</button>
diff --git a/twiddle.json b/twiddle.json
@@ -0,0 +1,19 @@
+{
+  "version": "0.12.1",
+  "EmberENV": {
+    "FEATURES": {}
+  },
+  "options": {
+    "use_pods": false,
+    "enable-testing": false
+  },
+  "dependencies": {
+    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
+    "ember": "2.12.0",
+    "ember-template-compiler": "2.12.0",
+    "ember-testing": "2.12.0"
+  },
+  "addons": {
+    "ember-data": "2.12.1"
+  }
+}