Help icons

src/app/index.coffee

@@ -144,7 +144,7 @@ ready (model) ->
     model.set('_debug', !model.get('_debug'))
 
 
-  $('.task-notes').popover()
+  $('.task-notes, [rel=popover]').popover()
   
   model.set('_hideCompleted', true)
   $('a[data-toggle="tab"]').on 'shown', (e) ->
@@ -202,7 +202,7 @@ ready (model) ->
   tour.addStep
     element: "ul.rewards"
     title: "Rewards"
-    content: "As you complete goals, you earn gold. Buy rewards, and buy them liberally - rewards are integral in forming good habits."
+    content: "As you complete goals, you earn gold to buy rewards. Buy them liberally - rewards are integral in forming good habits."
     placement: "bottom"
   tour.start()
         

styles/app/index.styl

@@ -41,6 +41,9 @@ h1.todos, h1.rewards
   float:left
   margin-right:15px
 
+.help-icon
+  float:right;
+
 .task:hover
   cursor: move
   

views/app/index.html

@@ -62,18 +62,21 @@
         and have to pass those in via {{{content}}} instead -->  
       
       <div class="span3 well">
+        <app:helpIcon helpTitle="Habits: Constantly Track." helpContent="Some habits only makes sense to gain points (1h of productive work). Others only lose points (swearing). For the rest, both + and - make sense (stairs=gain, elevator=lose)."/>
         <h1>Habits</h1>
         <ul class='habits'>{#each _habitList as :task}<app:task />{/}</ul>
         <app:newTask type=habit><input value={_newHabit} type="text" /></app:newTask>
       </div>
       
       <div class="span3 well">
+        <app:helpIcon helpTitle="Dailies: Complete Once Each Day" helpContent="At the end of each day, non-completed Dailies dock you points. They also become more valueable (worth more experience). This wil push you to focus on the reds (the goals that are doing worse)"/>
         <h1>Dailies</h1>
         <ul class='dailys'>{#each _dailyList as :task}<app:task />{/}</ul>
         <app:newTask type=daily><input value={_newDaily} type="text" /></app:newTask>
       </div>
 
       <div class="span3 well">
+        <app:helpIcon helpTitle="Todos: Complete Eventually" helpContent="Non-completed TODOs won't dock you points, but they will become more valuable over time."/>
         <h1 class='todos'>Todos</h1>
         <div class="tabbable"> <!-- Only required for left/right tabs -->
           <ul class="nav nav-tabs">
@@ -101,6 +104,7 @@
       </div>
 
       <div class="span3 well">
+        <app:helpIcon helpTitle="Rewards: Treat Yourself!" helpContent="As you complete goals, you earn gold to buy rewards. Buy them liberally - rewards are integral in forming good habits."/>
         <h1 class='rewards'>Rewards</h1>
         <div id="money">{gold(_user.money)} <img src='/img/coin_single_gold.png'/>  {silver(_user.money)} <img src='/img/coin_single_silver.png'/></div>
         <ul class='rewards'>{#each _rewardList as :task}<app:task />{/}</ul>
@@ -115,6 +119,8 @@
     <%= link_to(image_tag("http://line6.com/images/connections/facebook-login-button.png", :alt =>  "Login with Facebook"), user_omniauth_authorize_path(:facebook)) %>
   <% else %>-->
   <!--<% end %>-->
+<helpIcon:>
+  <span class="help-icon" rel="popover" data-placement="bottom" data-original-title="{{{helpTitle}}}" data-content="{{{helpContent}}}"><i class="icon-question-sign"></i></span>
   
 <newTask: nonvoid>
   <form class="form-inline" data-task-type={{{type}}} x-bind=submit:addTask>